SW프로그래밍/React
[React]immer
고랑이.
2021. 4. 26. 16:02
간단하게 불변성유지 작업을 처리할 수 있는 라이브러리.
"불변성에 신경쓰지 않는 것처럼 코드를 작성하되 불변성 관리를 제대로 해주는 것"
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함수가 불변성유지를 대신 해줌.
참조 :
리액트를 다루는 기술(김민준 / 길벗)