React Immer로 상태관리하기

Immer 가 뭐야?

며칠 전, Reducer로 상태 관리를 하는 방법에 대해 배웠다.

Reducer를 사용해서 편리하게 상태 관리하는 건 알았어!
그런데, 중첩된 객체가 많아진다면??

상태 업데이트 할 때마다 중첩 객체 업데이트를 위해 spread 연산자 사용하고, 복잡해질 것이다.
그래서 중첩 객체가 많아도 쉽게 간단하게 상태 관리를 할 수 있도록 Immer가 나온 것이다.

Immer 예시

Immer를 사용했을 때는 가변성 객체를 다루는 것처럼 쉽게 상태 변경을 할 수 있다.
Immer 객체 내부에서 새로운 객체를 생성하고 있기 때문에, 우리는 그걸 신경 쓰지 않아도 되는 것이다.

Immer 사용 방법

Install

yarn add immer use-immer

Use

import { useImmer } from 'use-immer' // 1. useImmer를 import 한다.

export default function ExampleImmer() {
    const [state, updateState] = useImmer(initialValue);
    const handleUpdate = () => {
        ...
        // 기본 사용 방법
        updateState(state => state.name = 'new name');
        // 객체를 변경해야 한다면?
        updateState(state => {
            const list = state.list.find((x) => x.name === prev);
            list.name = current;
        });
        // 객체에 값 추가
        updateState(state => state.list.push({name, value});
    }
}

이런식으로 상태관리가 간단해진다.

참고자료

Immer 공식 깃헙
Immer 공식 사이트