[React] Redux 개념 정리

✔️ Redux란?

Redux는 자바스크립트 상태 관리 라이브러리이다. 상태(state)를 효율적으로 관리할 수 있도록 도와주는 도구 중 하나이다.

 

 

✔️ Redux 기본 개념

1. 액션(Action)

상태를 변경하기 위해서는 액션을 통해 변경해야 한다. 액션은 객체 형식으로 표현되고, type을 필수로 가지고 있어야 한다. 옵션으로 다른 프로퍼티를 가질 수 있고, 액션에 필요한 부가적인 데이터를 전달할 때 주로 사용한다.

{
    type: 'ADD_MESSAGE',
    data: {
        id: 1
        message: "리덕스 배우기"
    }
}

메시지를 새로 추가하는 액션이고, 새로운 메시지에 대한 부가적인 data가 전달된다.

 

 

2. 액션 생성 함수(Action Creator)

액션은 객체 형식으로 바로 만드는 것이 아니라, 액션을 만들어 주는 액션 생성 함수를 통해 만든다.

function addMessage(data) {
  return {
    type: "ADD_MESSAGE",
    data,
  };
}

// arrow function
const addMessage = (data) => ({ type: "ADD_MESSAGE", data });

 

액션 생성은 액션 생성 함수를 호출함으로써 이루어진다.

addMessage({ id: 1, message: "리덕스 배우기" });

 

 

3. 리듀서(Reducer)

리듀서는 액션이 발생했을 때 상태(state)를 변경시키기 위한 함수이다. 리듀서는 현재 상태와 액션 객체를 받고, 새로운 상태를 반환한다.

function message(state, action) {
    switch(action.type) {
        case 'ADD_MESSAGE':
            return {
                ...state,
                action.data
            }
        default:
            return state
    }
}

여기서 액션에 전달한 부가적인 데이터인 data는 action.data와 같은 형식으로 사용할 수 있다.

 

 

4. 스토어(Store)

하나의 앱에는 단 하나의 스토어만 존재하고, 유일한 스토어를 사용하여 앱의 전체 상태를 관리한다.
스토어 생성은 다음과 같이 한다.

import { createStore } from "redux";
import message from "./messageReducer";

const store = createStore(message);

redux에서 제공하는 createStore 함수를 사용하고, 인자로 리듀서를 전달해 준다.

 

 

5. 디스패치(Dispatch)

디스패치는 스토어의 내장 함수 중 하나이다. 디스패치는 상태를 업데이트할 수 있는 유일한 방법이다. 액션을 리듀서에게 전달해 상태를 변경시킨다.

 

 

6. 구독(Subscribe)

구독은 스토어의 내장 함수 중 하나이다. 리스너 함수를 subscribe에 전달하여 호출하면 상태가 업데이트될 때마다 호출된다.

const listener = () => {
  console.log("Update!");
};

const unsubscribe = store.subscribe(listener);
unsubscribe(); // 구독을 비활성화할 때 함수를 호출한다

 

 

7. 셀렉터(Selector)

react-redux에서 상태 값을 가져올 때 사용한다.

const message = useSelector((state) => state.message);

 

✔️ Redux의 장점

• redux를 사용하지 않았을 때에 비하면 복잡하고 어려운 상태 관리(props drilling 등)를 스토어 한 곳에서 관리하기 때문에 효율적이고 간단하게 할 수 있다.
• 단방향 데이터 흐름이라는 특징을 가지고 있기 때문에 흐름을 파악하기 쉽고 디버깅하기 쉽다.
• 액션을 디스패치로 전달할 때마다 기록이 남기 때문에 에러를 찾기 쉽다.
• 리듀서는 같은 input을 입력하면 같은 output을 출력하는 순수 함수이기 때문에 상태 변화를 예측하기 쉽다.

 

✔️ Redux의 세 가지 원칙

1. Single source of truth

전체 상태값이 하나의 객체로 표현된다.
동일한 데이터는 항상 같은 곳에서 가지고 온다 → 단 하나의 스토어가 있다는 의미

2. State is read-only

state는 읽기 전용이다.
읽기 전용 상태를 변경하는 방법은 액션 객체뿐이다

3. Changes are made with pure functions

상태의 변경은 순수 함수로 이루어져야 한다.
이 순수 함수*를 reducer(리듀서)라고 한다. 리듀서는 이전 상태와 액션을 받아 다음 상태를 반환하는 순수 함수이다.

*순수 함수: 같은 인자가 들어오면 항상 같은 결과를 반환하는 함수

✔️ Redux와 유사한 상태 관리 툴

React의 Context API를 사용해 보았다.
내가 느낀 Context API와 Redux의 차이점은 아래와 같다.

Context API

리액트에서 제공하는 자체 전역상태 관리 API이다.

Context API로 관리하는 상태를 사용하기 위해서는 Provider로 컴포넌트를 감싸서 사용해야 한다.

여기서 각기 다른 Context를 사용하려고 할 때 Provider를 따로 여러 번 쓰는 경우나, Provider를 중첩해서 여러 번 사용해야 하는 경우가 생긴다.

<ItemContext.Provider value={{ items, setItems }}>
  <ShowContext.Provider value={{ isShow, setIsShow }}>
    {children}
  </ShowContext.Provider>
</ItemContext.Provider>

전역적으로 관리하는 상태는 useContext를 사용해서 꺼내 쓸 수 있다.

const { item } = useContext(ItemContext);

Redux

Redux로 관리하는 상태를 사용하기 위해서는 App 전체를 Provider로 감싸서 사용하는데, 여러 상태가 있더라도 store를 사용해 한 데 모을 수 있기 때문에 Provider를 한 번만 사용하면 어떤 컴포넌트에서든 모든 상태를 useSelector를 사용해 꺼내 쓸 수 있다. 

 

 

✔️ Redux를 사용하면 좋은 상황

하나의 state가 여러 컴포넌트에서 필요한 경우가 있을 때 redux를 사용하면 좋다.

redux를 사용하지 않을 경우에, 모든 컴포넌트에서 사용한다면 최상단의 컴포넌트, 예를 들어 App 컴포넌트에서 변수를 정의하고 그 변수를 모든 컴포넌트에 전달해 주어야겠지만, redux를 사용한다면 일단 그 코드에서 전달해 주는 게 줄어들고 useSelector를 사용해서 전역적으로 관리하는 변수를 사용할 수 있다.

 

규모가 큰 앱에서는 Redux를 사용하는 것이 상태 관리의 번거로움을 줄여 줄 수 있다.