[React.JS] Immer 라이브러리 활용 (1)

* Immer ?

--> 리액트에서 객체나 배열을 업데이트 할 시, 대상에 직접적으로 수정하는 코드는 불변성을 위배하는 행위이다.

스프레드 연산자를 활용하여 새로운 대상생성 및 기존데이터 복사 후, 업데이트하는 방식이 불변성을 지키는 것 입니다.

객체(Object)	객체대상.속성 = 값 (불변성X)	Spread연산자 사용 (불변성O)
배열(Array)	push, splice사용 (불변성X)	Spread연산자, (concat, filter, map)사용 (불변성O)
Immer 라이브러리 사용 시 불변성에 관하여 고려하지 않고 작성하여도, "불변성이 유지"된다.  (즉, 변화가 일어날 시 기존의 데이터는 유지하며 새로운 데이터를 만든다)

 

* Immer 구조 ?

const Immer수행결과 = Immer(target, draft => { });

 

--> Immer첫번 째 파라미터 (Target): 바꿔주고싶은 객체 또는 배열   
-->Immer두번 째 파라미터 (CallBackFn): Target의 변화에 관하여 선언

     draft => { Biz.. Logic.. 첫번째 파라미터 활용한 변화.. } 

 

---

 Immer Use Exercise..

 

 

1. Immer 라이브러리 설치 

$ cd "ReactProjet Path"

$ yarn add immer

 

 

2. App.js 수정 

Step1. 외부라이브러리(immer) import.. (* 관례적 사용이름 - produce)

 

Step2. 브라우저에서 React - App.js 컴포넌트가 렌더링 될시, 개발자도구[F12]에서 Immer사용 가능하도록 설정.

 

 

3. React프로젝트 실행 후 Immer테스트

--> Browser 개발자도구[F12] 'Console' 에서 Immer 테스트..

* produce --> Immer활성화..

 

* produce('상태변경대상: 객체,배열', draft => { 대상변화에 관한 로직.. });

  - produce(initObj, draft => { draft.number += 1 }); 

  - produce(pets, draft => { draft.push({id: 4, name: 'TaLea'}); draft[0].name = draft[0].name + ' So Cute..!'; });

   대상에 직접적으로접근하여 값을 수정 - 불변성 위배코드.. 

 

* Immer를 활용하여 업데이트 후, 기존데이터 유지 확인! --> "pets" 

 

 

 

exit..