Redux를 사용하는 이유

영화를 검색하면 리스트를 보여주는 App을 개발하려고 한다. 이 App에는 검색 컴포넌트, 검색 후 결과를 보여주는 컴포넌트, 로그인 컴포넌트 등등.. 다양한 컴포넌트를 사용한다.

그렇다면 이 다양한 컴포넌트들 사이에서 어떻게 데이터를 전달해야 할까? 리액트에서는 부모 -> 자식 컴포넌트로 데이터를 전달하기 때문에, props를 사용해서 데이터를 전달할 수 있다.

그런데 만약 부모 -> 자식으로 전달하는 데이터가 하나의 레이어가 아니라면? 부모 -> 자식 -> 자식 -> 자식.... 계속해서 props를 전달해줘야 한다.

이럴 때 Redux를 유용하게 사용할 수 있다. 데이터를 독립된 공간에 저장해두고, 필요한 컴포넌트에서 가져다 쓰기 때문에 props를 연속적으로 전달해줄 필요가 없어진다.

Redux 사용

react에서 redux를 사용하기 위해서 먼저 redux와 react-redux를 설치해야 한다.

redux는 실제 상태 관리 패키지이고, react-redux는 react와 redux를 연결해서 사용하기 위한 패키지라고 보면 된다.

npm inatall redux react-redux

Redux의 주요 키워드

Store

전역적인 state. Store는 모든 데이터, 또는 state를 가지고 있다. 어디서든 접근할 수 있는 하나의 큰 State라고 보면 된다.

Action

만약 카운트를 하나 만든다고 할 때, 이 때의 Action은 증가, 초기화, 감소 등으로 정의할 수 있다. 전에 포스팅했던 useReducer 글에서 설명했듯이 주문이라고 생각하면 쉽다. 사용자는 원하는 것을 말하기만 하면 된다.

Reducer

action과 state를 체크해서 Store의 값을 변경하는 함수.

Dispatch

reducer를 동작시키는 함수. dispatch를 통해 reducer에 action을 전달하고, reducer는 이를 확인하여 store의 state를 변경한다.

Redux를 사용한 Counter 예제

  // ACTION
  // 모든 action은 함수이고, 그 함수는 객체(object)를 반환한다.
  const increment = () => {
    return {
      // action 이름 정의. 보통 type을 씀.
      type: "INCREMENT"
    };
  };

  const decrement = () => {
    return {
      // action 이름 정의. 보통 type을 씀.
      type: "DECREMENT"
    };
  };

  //REDUCER
  // Reducer에는 두 개의 파라미터를 넣어준다.
  // 첫번째는 counter의 초기값, 두 번째는 action
  const counter = (state=0, action) => {
    switch(action.type){
      case "INCREMENT":
        // Store의 상태를 변경한다.
        return state + 1;
      case "DECREMENT":
        return state - 1;
    }
  }

  let store = createStore(counter);
  store.subscribe(() => console.log(store.getState()));
  
  // DISPATCH
  store.dispatch(increment());
  store.dispatch(decrement());
  store.dispatch(decrement());

React앱과 Redux 사용하기

• reducer를 분리해서 코드를 작성할 수도 있다. 상태를 체계적으로 관리하는 것도 Redux의 장점 중 하나인 것 같다.

참고

Redux For Beginners