Redux란?

필요한 이유

만약 A 컴포넌트가 B 컴포넌트에, B 컴포넌트는 C 컴포넌트에.. 이렇게 D, E, F, G 컴포넌트 까지 이어진 루트가 있다고 가정했을 때

A 컴포넌트가 G 컴포넌트에 접근해 무언가 하려고 한다면 A ▶ B ▶ C ▶ D ▶ E ▶ F ▶ G 순서로 접근 후, 다시 G ▶ F ▶ E ▶ D ▶ C ▶ B ▶ A 루트를 통해 돌아와야한다. = 이는 매우 비효율적인 행위.

 

이 때 하나의 스토어 ( Store ) 라는 매체를 두면 위의 순서가 아니라,

A ▶ Store ▶ G 식의 효율적인 접근이 가능하게 해준다.

이 Store 는 Redux 를 통해 사용할 수 있다.

 

 

리덕스 ( Redux ) 란?

• Redux는 상태 관리 도구이다.
• 주로 React와 함께 사용되며 다른 JavaScript 프레임 워크 또는 라이브러리와 함께 사용한다.
• 2KB (종속성 포함)로 가벼워서 응용 프로그램의 자산 크기가 커질까 걱정할 필요가 없다.
• Redux를 사용하면 state 를 공용의 store 라는 공간에서 관리하며 각 구성 요소는 이 store 에서 필요한 모든 상태에 액세스 할 수 있다.

---

리덕스는 가장 사용률이 높은 상태관리 라이브러리로써 위에 언급한대로 리액트의 복잡한 컴포넌트 구조속에서 보다 간편하게 모든 컴포넌트들이 state 를 쉽게 공유할 수 있게 해주는 방식이다.

 

리덕스에서 자주 사용되는 키워드들에 대해 설명하면,

액션

state 에 어떤 변화가 필요할 때 우린 액션이란 것을 발생시키며 이는 하나의 객체이다.

⇒ 어떤 동작에 대해 선언되어진 객체

액션은 반드시 type 필드를 가지고 있어야 하며, 그 외의 값은 상황에 따라 넣어줄 수 있다.

// action 1
{
    type: "NUMBER_COUNT"
},

// action 2
{
    type: "CHANGE_INPUT",
    text: "안녕하세요
}

type 필드는 어떤 동작인지를 표기한 것으로 예를 들어 상사가 후임에게 어떤 일을 시킬 때 그냥 일해라 하진 않고 청소 일 해라, 밥 차리는 일 해라 하듯 어떤 일인지 식별할 수 있는, 일의 주제이다.

 

액션 생성 함수

Action 이 동작에 대해 선언된 객체라면

Action Creator 는 이 Action 을 생성해 실제로 객체로 만들어주는 함수이다.

 

리듀서

State 에 변화를 일으키는 함수이다.

⇒ Action 등의 일거리를 직접 수행한다.

리듀서는 현재의 State 와 Action 을 인자로 받아 Store ( 스토어 ) 에 접근해 Action 에 맞춰 State 를 변경한다.

 

스토어

스토어는 현재 앱의 State 와 Reducer 함수, 그리고 몇 가지 내장 함수등을 가지고 있다.

⇒ State 를 수시로 확인해 View 한테 변경된 사항을 알려준다.

 

디스패치

디스패치는 스토어의 내장 함수 중 하나로 리듀서(일 직접 수행)에게 Action 을 발생하라고 시킨다.

dispatch 함수는 dispatch(action) 이런 식으로 Action 을 인자로 넘긴다. 이렇게 호출을 하면 스토어가 리듀서 함수를 실행해 리듀서 함수가 넘긴 액션을 처리해 새로운 상태를 만들어 준다.

 

구독

구독 또한 스토어의 내장 함수 중 하나로 함수 형태의 값을 인자로 받는데,

액션이 디스패치 될(action을 실행하라고 시킬) 때 마다 전달해준 함수를 호출한다.

유X브 의 구독을 예로 들면 구독하기를 눌린 BJ 의 글이 올라올 때 알림이 뜨는데 이는 이를 계속 주시하고 있기 때문이다.

이처럼 subscribe 도 스토어를 주시하고 있다가 디스패치 될 때 함수를 호출한다는 뜻이다.

 

---

[참고]

https://mjn5027.tistory.com/33#2