[Library] immer - react에서 불변성을 유지하는 코드를 쉽게 작성할 수 있도록 도와주는 라이브러리

immer

react에서 쉽게 불변성을 유지할 수 있는 코드 작성을 도와주는 라이브러리

불변성은 뭘까?

리액트 컴포넌트에서 상태를 업데이트 할 때 불변성을 지키는 것은 매우 중요하다. '불변성을 지킨다' 라는 것은 기존의 값을 직접 수정하지 않으면서 새로운 값을 만들어 내는 것을 말한다.

react 기본 속성

react는 기본적으로 부모 컴포넌트가 리렌더링을 하면 자식 컴포넌트도 리렌더링하게 된다.즉, 얕은 비교를 통해 새로운 값인지 아닌지를 판단한 후 새로운 값인 경우 리렌더링을 하게 된다.

✔ 얕은 비교
객체, 배열, 함수와 같은 참조 타입들을 실제 내부 값까지 비교하지 않고 동일 참조인지(동일한 메모리 값을 사용하는지)를 비교하는 것

설치

yarn add immer

produce

첫번째 파라미터에는 수정하고 싶은 상태
두번째 파라미터에는 어떻게 업데이트하고 싶을지 정의하는 함수

리듀서에서 Immer 사용하기

const cunter - handleActions(
	{
      [UP] : (state, action) => produce(state, (draft) => {
        draft.loading = true
      })
    },
  initialState
)