React-Redux 개념 잡기 #1

소개

Redux는 상태(state) 관리 라이브러리이다.

 

Redux는 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 효율적으로 상태를 관리할 수 있다.

특히, 컴포넌트끼리 상태를 공유해야 할 때, 기존의 여러 컴포넌트를 거쳐 전달해야 하는 방식과는 달리 Store를 통해 쉽게 상태 값을 전달할 수 있다.

 

Redux는 React 외에도 jQuery 혹은 Angular를 사용하는 애플리케이션에서도 사용할 수 있지만, 이 글에서는 React 기반으로 서술할 것이다.

---

Redux는 글로벌 상태 관리에 효과적이다.

 

굳이 '글로벌 상태 관리'라는 말을 하는 이유는 굳이 Redux를 사용할 필요는 없기 때문이다.

간단한 애플리케이션이라면, Redux를 사용하지 않더라도 상태를 관리하는데 큰 어려움 겪지 않을 것이다.

 

하지만 컴포넌트 간의 연결이 많아진다면 어떨까?

위 그림은 Root 컴포넌트에 something이라는 상태 값이 있고, onDoSomething이라는 함수가 something 상태 값에 변화를 준다.

 

onDoSomething 함수는 1번 루트를 따라 전달되고, H에서 이벤트가 발생하게 되면 something의 상태 값이 변한다.

변한 상태 값은 2번 루트를 따라 F에 전달된다.

 

이처럼 간단한 애플리케이션이라면 큰 문제가 없을지 모르지만,

props를 해당 위치에 전달하기 위해 props를 사용하지 않는 컴포넌트를 거쳐야 한다는 것은 매우 비효율적이다.

만약, 상위 컴포넌트에서 props의 이름을 바꾸게 된다면 하위 컴포넌트마다 일일이 바꿔주어야 할 것이다.

 

Redux를 사용한다면 좀 더 효율적인 구조로 작업할 수 있을 것이다.

상태 관련 데이터, 로직이 들어있는 Store를 통해 컴포넌트끼리 교류하는 방식을 취할 수 있다.

---

Redux의 3가지 원칙

dispatch와 subscribe는 store의 내장함수 이다.

Single Source of Truth (하나의 진실의 근원)

Redux는 state를 저장하기 위해 한 개의 store만 사용한다. (이것이 FLUX 디자인 패턴과의 차이다. FLUX는 여러 개의 store을 사용한다.) 단일 state tree를 구성하게 되는데, 단일 state tree는 애플리케이션을 디버그 하기 쉽게 만든다.

 

State is read-only (state는 읽기 전용)

state를 변경할 수 있는 유일한 방법은 action을 넘겨주는 방법이다.

애플리케이션은 직접 state를 변경할 수 없고, state를 변경하기 위해선 action을 dispatch 해야 한다.

 

Change are made with Pure Functions (변화는 순수 함수로 만들어야 한다)

action을 dispatch 하여 state를 변경한다.

action으로 state를 업데이트하는 함수를 Reducer이라고 한다.

즉, action을 어떤 변화가 있는지 정의하는 객체라고 한다면, Reducer은 action을 가지고 state를 변경시켜 줍니다.

---

미리 보는 Redux 용어 간단 정리

- 액션(Action)

상태에 어떠한 변화가 필요할 때 Action을 발생시키며, Store에 데이터를 넣는 유일한 방법이다.

Action은 다음과 같이 하나의 객체로써 표현된다.

{
  type: "TOGGLE_VALUE"
  
  ...
  
}

Action 객체는 type을 필수적으로 가지며, 추가적인 데이터와 함께 Store에 보내진다.

---

- Type과 Action Creator

type은 Action의 종류를 한 번에 식별할 수 있는 문자열 또는 심볼을 의미한다.

 

type 명 앞에 state명을 붙여 정의하는데, 이는 store안에 있는 여러 개의 state 중에서 식별을 명확하게 하기 위함이다.

type은 보통 길기 때문에 편의를 위해 변수로 지정해 사용한다.

 

Action Creator는 매개변수를 받아 Action 객체 형태로 만든다.

Action creator가 argument를 받아 action을 생성하는 모습

보통 다음과 같이 작성한다. 

// type
// 'state명 / type명'
export const INCREASE = 'counter/INCREASE' as const; 
export const INCREASE_BY = 'counter/INCREASE_BY' as const;

// action creator
export const increase = () => ({ type: INCREASE });
export const increaseBy = (diff: number) => ({
  type: INCREASE_BY,
  payload: diff
});

자세한 내용은 참고.

---

- 리듀서(Reducer)

Reducer는 이전의 상태(누적 값)와 Action(누적될 값)을 받아서 새로운 상태를 반환하는 함수이다.

 

Reducer에서 누적 값은 상태 객체이고, 누적될 값은 Action이다.

Reducer는 주어진 누적 값과 Action으로 부터 새로운 상태를 계산한다.

 

주의해야할 점!

• 이들은 반드시 순수함수여야 한다.
• 초기상태는 Reducer의 디폴트 인수에서 정의된다
• 상태가 변할 때 전해진 state는 그 자체의 값으로 대체 되는 것이 아니라, 새로운 것이 합성되는 것처럼 쓰여진다.

---

-  스토어(Store)

Store는 애플리케이션의 상태 트리를 가지고 있고 Store의 상태를 바꾸기 위해선 Action을 보내야 한다.

Redux에서는 하나의 애플리케이션은 하나의 Store만 가질 수 있다.

 

스토어의 내장함수들이 궁금하다면

---

 

참고한 글 및 참고하면 좋은 글

Store · Redux

 

아마 이게 제일 이해하기 쉬울걸요? React + Redux 플로우의 이해

 

Type과 Action

 

Redux (1) 소개 및 개념정리

 

Store(미번역) · Redux