불변성

불변성이란 기존의 값을 그대로 유지하면서 새로운 값을 추가하는 것으로

객체가 생성된 이후 그 상태를 변경할 수 없는 디자인 패턴을 의미한다.

불변성은 React에서 리렌더링하는 시기를 결정하는데 순수 컴포넌트를 만들 수 있게 하며 변하지 않는 데이터는 변경이 이루어졌는지 쉽게 판단할 수 있다.

Spread 연산자를 이용해 객체나 배열의 값을 복사할때는 얕은 복사를 하게 된다.

이렇게 불변성을 유지함으로써 side-effect가 줄어들고 컴포넌트 최적화가 가능하다.

하지만 불변성을 계속 유지하려고 하면 코드가 길어지고 구조의 깊이가 깊어질수록 상태는 접근조차 어려워질 수 있다.

이러한 문제를 해결하기 위해 불변성을 유지시켜주면서 코드를 단순하고 직관적으로 짤 수 있는 라이브러리가 있다.

Immer

Immer은 Immutable과 같이 불변성을 유지를 편리하게 해 주는 라이브러리다.

Immer.js 를 설치해 준다.

yarn add immer

produce에는 두가지 파라미터가 존재하는데

첫번째 파라미터는 적용 대상인 state,
두번째 파라미터는 상태를 어떻게 업데이트할지 정의하는 함수를 넣어준다.
이처럼 Immer 라이브러리는 확실히 간단하다.
복잡한 데이터 구조의 불변성을 유지하면서 업데이트때 Immer를 사용하는 것을 추천한다.