Reducer로 React에서 상태 관리 하는 방법

서비스를 개발할 때 아이템의 상태 관리를 하는 것은 중요하다.
리액트에서도 상태 관리를 할 수 있다.

기본 상태 관리 - useState

컴포넌트 안에서 사용하는 아이템의 상태를 관리하려면 useState를 사용하면 된다.
그런데 다른 컴포넌트에서도 이 아이템을 사용하고 싶다면??
이런 고민과 불편함은 상태 관리 라이브러리를 사용하여 해결할 수 있었다.

상태 관리 라이브러리 종류: Redux, MobX, Immer 등...
하지만! 지금은 최신 React에서 제공해 주는 Hook을 이용해서 상태 관리를 할 수 있다.

React Hook으로 상태 관리하기

useState : 일반 원시값이나 객체, 배열인 경우
useReducer : 상태 관리 코드를 분리하고 재사용하고 싶을 경우
context : 여러 컴포넌트에서 글로벌하게 상태 관리를 하고 싶은 경우

Reducer 사용하기

1. Reducer 소스를 관리할 파일 생성한다.
2. Reducer 함수를 생성한다.

function exampleReducer(state, action) {
    // action type으로 필요한 기능을 나눠서 구현한다.
    switch (action.type) {
        case 'add': {
            /* case 별 필요한 처리 */
            return { /* 업데이트된 state 리턴*/}
        }
        case 'update': {
            ...
            return { ... }
        }
        ...
    }
}

3. 컴포넌트에서 생성한 Reducer를 사용한다.

//component.jsx
...
export default function Component() {
    // UseReducer에 생성한 Reducer와 초기값을 전달해준다.
    // 반환된 dispatch를 사용하여 원하는 액션을 명령할 수 있다.
    const [state, dispatch] = exampleReducer(reducer, initial);

    ...

    const handle = () => {
        //dispatch 예시
        dispatch({ type: 'add', arg1, arg2 ... }); //exampleReducer 호출
    }
}

dispatch 시 넘기는 객체는 action 객체로 들어간다.

Reducer의 장점

컴포넌트와 상태관리를 분리할 수 있다.
상태관리 재사용이 가능하다.