[React] immer를 사용하여 쉽게 데이터 불변성 유지하기

안녕하세요.

 

오늘은 immer 라이브러리를 사용하여 쉽게 데이터의 불변성을 유지하는 방법에 대해서 알아보겠습니다.

 

 

데이터 불변성의 중요성

• 리액트 컴포넌트에서 상태를 업데이트할때 불변성을 지키는 것은 매우 중요하다.
• 리액트에서는 React.memo를 사용했을때 props가 바뀌었는지 혹은 바뀌지 않았는지를 알아내서 리렌더링 성능을 최적화해줄수있다.
• 불병성이 지켜지지 않는다면 React.memo와 같은 최적화는 불가능하다

immer가 꼭 필요한가?

• 반드시 필요하진 않다. 전개 연산자와 배열의 내장함수를 사용하면 쉽게 새로운 값을 만들 수 있다.
• 하지만 객체 구조가 깊어질수록 불변성을 유지하면서 업데이트하는것은 힘들어진다.
• 컴포넌트의 상태 업데이트가 까다로울때 immer 라이브러리를 사용하면 좋다.

// 사용 전
const onChange = useCallback(event => {
    const { name, value } = event.target
    setForm({
        ...form,
        [name]: value
    }) 
}, [form]);

// 사용 후 - 객체 구조가 깊어질수록 쉽게 데이터를 생성할 수 있다.
import produce from 'immer';

const onChange = useCallback(event => {
    const { name, value } = event.target
    setForm(
        produce(draft => {
            draft[name] = value
        })
    )
}, [form]);

 

 

참조

• github.com/immerjs/immer