본문 바로가기

Dot Programming/React ∙ Next.js

[React] 불변성 관리 라이브러리 Immer사용하기

Immer

react useState나 redux에서 불변성을 지켜줘야할 때 사용하는 라이브러리 (check)

$ npm i immer

 

immer

Create your next immutable state by mutating the current one

www.npmjs.com

hook 버전은 사용하려면 'use-immer' (check)

 

immer 기본 형태

import produce from 'immer';

// reducer: 이전 상태를 액션을 통해 다음 상태로 만들어내는 함수 (불변성 지키면서)
const reducer = (state = initialState, action) =>{
    return produce(state, (draft) => {

    });
}

state → draft로 사용

draft는 불변성 상관없이 마음대로 바꿔도 된다. immer가 알아서 불변성을 지키면서 다음 상태로 만들어 준다.