React - 12장 : Immer 라이브러리를 사용하여 불변성 유지

<리액트를 다루는 기술>

React - 1장 : React 이해

React - 2장 : JSX

React - 3장 : 컴포넌트

React - 4장 : 이벤트 핸들링

React - 5장 : ref. DOM에 이름 달기 

React - 6장 : 컴포넌트 반복
React - 7장 : 컴포넌트의 LifeCycle
React - 8장 : React Hooks 총정리

React - 9장 : 컴포넌트의 스타일링

React - 10장 : 빠르게 TODO앱 실습

React - 11장 : 컴포넌트 성능 최적화

React - 12장 : Immer 라이브러리를 사용하여 불변성 유지(현재)

 

객체가 복잡해지고 깊어지면 불변성을 유지하며 업데이트가 힘들어진다. immer 라는 라이브러리를 사용하면 복잡한 객체도 쉽고 짧은 코드로 불변성을 유지하면서 업데이트해줄 수 있다.

 

12.1 프로젝트 준비

- npx create-react-app immer-tutorial

- cd immer-tutorial

- npm i immer

12.2 Immer 사용법

바꾸는 게 쉬워졌다.

- produce 함수는 두가지 파라미터를 받는다

- 첫번 째 파라미터 : 수정하고 싶은 state

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

- 두번 째 파라미터 함수 내부에서 원하는 값을 변경하면, produce함수가 불변성 유지를 대신 해주면서 새로운 상태를 생성한다.

12.3 Immer 사용 예시코드

이미지라서 복붙 못하니까 직접 쳐보자. find push splice findIndex 메소드 모르면 알고리즘에 정리글 있다.

12.4 useState의 함수형 업데이트와 함께 적용해보기

함수형 업데이트

useState의 함수형 업데이트 예시

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

도대체 푸 바 이건 누가 만든거냐

- immer를 사용할 때에는, 객체 안의 값을 직접 수정하거나, 배열에 변화를 일으키는 splice, push등의 함수를 사용해도 무방하다.

- 당연히 그냥 개발해서 문제 1도 없으면 안써도 무방하다.