[React] immer

# immer 는 불변성을 유지하는 작업을 매우 간단하기 처리하기 위해 쓴다.

불변성이란?

- 코드상에서 기존에 값을 수정하지 않고 새로운 값을 만들어내야 한다는 의미를 불변성이라고 한다.

 

예시)

import produce from 'immer';

const nextState = produce(originalState, draft => {

  // 바꾸고 싶은 값 바꾸기

  draft.somewhere.deep.inside = 5;

})

 

produce 라는 함수는 두 가지 파라미터를 받습니다. 첫 번째 파라미터는 수정하고 싶은 상태이고,

두 번째 파라미터는 상태를 어떻게 업데이트할지 정의하는 함수입니다.

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

주면서 새로운 상태를 생성해 줍니다.

 

이 라이브러리의 핵심은 '불변성에 신경 쓰지 않는 것처럼 코드를 작성하되 불변성 관리는 제대로 해 주는 것'입니다.

 

# useState의 함수형 업데이트와 immer 함께 쓰기

- immer 에서 제공하는 produce 함수를 호출할 때, 첫 번째 파라미터가 함수 형태라면 업데이트 함수를 반환합니다.

- 이러한 immer 의 속성과 useState 의 함수형 업데이트를 함께 활용하면 코드를 더욱 깔끔하게 만들 수 있습니다.