React - 12장 : Immer 라이브러리를 사용하여 불변성 유지
<리액트를 다루는 기술>
React - 6장 : 컴포넌트 반복
React - 7장 : 컴포넌트의 LifeCycle
React - 8장 : React Hooks 총정리
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 사용 예시코드
12.4 useState의 함수형 업데이트와 함께 적용해보기
함수형 업데이트
- immer에서 제공하는 produce 함수를 호출할 때, 첫 번째 파라미터가 함수 형태라면 업데이트 함수를 반환한다.
- immer를 사용할 때에는, 객체 안의 값을 직접 수정하거나, 배열에 변화를 일으키는 splice, push등의 함수를 사용해도 무방하다.
- 당연히 그냥 개발해서 문제 1도 없으면 안써도 무방하다.