react-redux 로 상태 관리하기 - 01. 리덕스란

리액트 어플리케이션에서는 상태와 속성을 통해 컴포넌트끼리 값을 주고받는다는 것을 알고 계실 것입니다.

그런데 컴포넌트 계층이 아래 이미지와 같다고 할 때, App에서 TodoItem까지 값을 전달해야 한다면 어떨까요?

맞습니다. App에서 TodoItem 컴포넌트까지 값을 전달하기 위해 TodoContainer, TodoList 컴포넌트에도 상태를 넘겨줘야 합니다. 물론 전달할 상태값이 단순하고 컴포넌트의 중첩 깊이가 깊지 않다면 이렇게 해도 큰 문제는 없습니다.

 

다만 큰 문제가 없을 뿐이지 분명히 더 나은 방법이 있는데요, 바로 오늘 소개할 리덕스를 활용하는 방법입니다.

🛠 리덕스(Redux)

리덕스는 데이터를 저장하는 거대한 창고(Store)와, 창고에 진입할 수 있는 함수들을 제공하는 라이브러리입니다.

리덕스를 구성하는 요소들은 크게 다음과 같습니다.

• 스토어(Store) : 상태값을 저장하는 거대한 창고로, 어플리케이션당 하나의 스토어를 둡니다.
• 리듀서(Reducer) : 스토어에 저장된 상태값을 조작할 수 있는 함수로, 초기 상태와 액션 객체를 받아 변경할 상태를 리턴합니다.

[리듀서 함수의 예시]

const initialState = {
  count: 0,
};

export const CounterReducer = (state = initialState, action) => {
  switch (action.type) {
    case "INCREASE":
      return { ...state, count: state.count + 1 };
    case "DECREASE":
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

• 액션(Action) : 위의 리듀서 함수 예제를 보면 액션 객체의 타입에 따라 다른 작업을 수행하는 것을 알 수 있습니다. 액션 객체는 {type: "수행할 동작", payload: "데이터"} 형태로 이루어져 있습니다.
• 디스패치(Dispatch) : 리듀서 함수는 사실 직접 호출할 수 없습니다. 디스패치 함수에 액션을 인자로 넣고 호출하면 자동으로 리듀서에 액션이 전달되고, 리듀서는 주어진 액션에 따라 다른 분기를 수행합니다.

첫눈에 이해하기는 쉽지 않겠지만, 이를 짧게 요약해보자면 다음과 같습니다.

 

1. 데이터(상태값)는 스토어에 저장됨.

2. 리듀서 함수는 정해진 액션에 따라 스토어에 담긴 데이터를 조작함.

3. 리듀서는 직접 실행할 수 없고, 디스패치 라는 함수를 호출해 실행함.

 

이제 리덕스에 대한 소개는 어느 정도 끝난 것 같으니, 다음 글에서는 코드로 리덕스를 만나 보도록 하겠습니다. 😁