리액트 - immer

immer: 불변성을 해치는 코드를 작성해도 대신 불변성을 유지해줌

• immer library 설치가 필요함
• 필수라이브러리는 아니기때문에 적재적소에 사용하는 것이 중요하다. 무작정 사용하면 안됨
  • update 로직이 까다로운 경우에 사용하는 것이 좋음 간단한 경우에는 크게 의미가 없다.

produce(바꾸고 싶은객체, 어떻게 바꿀지 알려주는 함수)

import produce from 'immer'

window.produce = produce

const state = {
	number :1,
	dontChangeMe : 2 
}

const nextState = produce(state, draft =>{
	draft.number = 2;
} 

//불변성을 지키지 않으면서 변경해도 produce가 값을 지켜줌
//배열도 동일하게 추가 삭제 수정 가능!
//깊은 복사의 개념과 유사한것 같다 

//output:{ number : 2, dontChangeMe } 

기존에 사용했던 업데이트 코드를 immer를 사용하면 조금 더 이해하기 쉬운 코드가 된다.

⇒ 하지만 기존 코드가 엄청나게 이해하기 어려운 것이 아니므로 굳이! 사용하지 않아도 될 것 같다.

return produce(state, draft=>{
          const user = draft.users.find(user => user.id === action.id);
          user.active = !user.active;
        })
//이 경우에는 immer가 더 코드가 이해하기가 명확함.
// return{
//   ...state,
//   users:state.users.map(user=>
//     user.id === action.id ? {...user, active: !user.active} : user)
// };

---

immer의 성능은 당연히 라이브러리이기 때문에 리액트 자체에 내장된 reducer보다 조금은 느릴 수 밖에 없다. 하지만 오만개를 업데이트한 경우에 비교 속도가 21ms 정도 밖에 되지않기때문에 코드가 현저히 깔끔해 진다면 사용하는 것이 좋을 것 같다.