[React.js] Redux의 3가지 원칙

Redux란?

Redux는 javascript application을 위한 예측 가능한 상태 컨테이너이다.

리덕스는 상태를 단일 저장소에 저장한다는 아이디어에서 출발한다. 단일 저장소에 저장한다면 큰 이점이 있을까?

Single source of truth

각 컴포넌트가 상태를 업데이트하기 위해 setState 함수를 호출하여 state 업데이트한다.
컴포넌트가 많을수록 state가 업데이트된 이유를 알기 위해 컴포넌트 트리를 추적한다.
이러한 과정은 개발의 효율성을 매우 떨어트린다. Redux는 단일 저장소에 상태를 저장하여, 상태 관리를 단순화시켜준다.

State 읽기 전용

state는 읽기 전용이다. 그렇다면 어떻게 상태를 갱신할 수 있을까?
state를 변경하기 위해서는 명령이 필요하다. 이를 리덕스에서 action(액션)이라고 부른다. 액션을 통해서만 상태만을 갱신할 수 있다.
액션은 다양하게 정의할 수 있으며 액션에 따라 선별된 상태를 갱신할 수 있다.

아래는 다음 포스팅에서 구현할 TodoList의 예제이다.

/**
* 액션타입
*/
export const ADDTODOLIST = "todoList/ADDTODOLIST";
export const DELETETODOLIST = "todoList/DELETETODOLIST";

위 예제에서 액션을 총 2개이다. todoList/ADDTODOLIST"와 todoList/DELETETODOLIST이다. 필자는 액션에 prefix로 todoList를 사용했다. 변수명만 봐도 무엇을 하는 액션인지 금방 알 수 있다. ADDTODOLIST는 todo를 추가할 때 사용하는 액션이고, DELETETODOLIST는 todo를 제거할 때 사용할 액션이다.

순수 함수로 변경

Reducer(리듀서)는 이전 상태와 액션을 인자로 받아 새로운 상태를 리턴하는 순수 함수이다. 따라서 이전의 상태를 변경하지 않고 새로운 상태를 리턴해야 한다.
아래는 다음 포스팅에서 구현할 TodoList의 리듀서이다.

switch (action.type) {
    case ADDTODOLIST:
      return [
        ...state,
        {
          id: action.id,
          title: action.title,
          description: action.description
        }
      ];
    case DELETETODOLIST:
      const nextState = state.filter(todo => todo.id !== action.id);
      return nextState;
    default:
      return state;
  }

액션 타입에 따라 이전의 상태는 변경하지 않고, 새로운 상태 객체를 리턴한다.

간단하게 리덕스에 대해 알아보았다. 

 

다음 포스팅에서는 위에서 배운 개념으로 리덕스 설치와 TodoList예제를 만들어보겠습니다.