[React]immer

간단하게 불변성유지 작업을 처리할 수 있는 라이브러리.

"불변성에 신경쓰지 않는 것처럼 코드를 작성하되 불변성 관리를 제대로 해주는 것"

yarn add immer

import produce from 'immer';

const originState = [
	{
    	id : 1,
        todo : "전개연산자(...)와 배열 내장 함수로 불변성 유지하기",
        checked : true
    },{
    	id : 2,
        todo : "immer로 불변성 유지하기",
        checked : false
    }
]

const nextState = produce(originState, draft => {
	//바꾸고싶은 값 바꾸기
    //id가 2인 항목의 checked 값을 true로 설정
    const todo = draft.find( t => t.id === 2)
    todo.checked = true;
    
    //배열에 새로운 데이터 추가
    draft.push({
    	id : 3,
        todo : "immer 적용하기",
        checked : false
    });
    
    //id = 1인 항목 제거
    draft.splice(draft.findIndex(t => t.id === 1), 1);
})

첫번째 파라미터(originState)는 수정하고 싶은 상태, 

두번째 파라미터(draft)는 상테를 어떻게 업데이트할지 정의

 

두번째 파라미터로 전달되는 함수 내부에서 원하는 값을 변경하면, produce함수가 불변성유지를 대신 해줌.

 

 

---

참조 :

리액트를 다루는 기술(김민준 / 길벗)