(React) Immer에 대해서/Immer 사용법

---

(React) Immer에 대해서/Immer 사용법

---

* 본 포스팅은 개인 공부를 위해 '리액트를 다루는 기술'을 읽은 후 정리한 내용입니다.



포스팅 요약

1. 불변성의 중요성

2. immer이란?

3. immer 사용법

4. immer 사용 예제

1)immer 사용 전

2)immer 사용 후

3)useState와 immer 함께 쓸 때

---

1.  불변성의 중요성

> 불변성이 지켜지지 않을 경우, 값이 새로워져도 바뀐 것을 감지 못함.

> 바뀐것을 감지 못할 경우, React.memo에서 서로 비교하며 최적화하는 것 불가능.

 

2. immer이란?

> 객체구조가 깊어질 경우, 간단하게 불변성을 유지하며 업데이트해 줄 수 있는 라이브러리

 

3. immer 사용법

1) immer 라이브러리 설치

yarn add immer

 

2) immer 사용 형식

import produce from 'immer';
const nextState = produce(originalState, draft =>{
	//바꾸고 싶은 값
})

 

4. immer 사용 예제

 

아래 코드와 같이 깊이가 있는 객체가 있을때, 

people중 id가 2인 사람의 add항목에 객체를 하나 더, 추가하려면 어떻게 해야될까?

const info = {
    people: [
      {
        id: 1,
        name: "코짜문",
      },
      {
        id: 2,
        name: "코드짜는 문과녀",
        add: [
          {
            job: "teacher",
            detail_info: {
              address: "경기도",
              phone: "1234-1234",
            },
          },
        ],
      },
    ],
    people2: "none",
  };

 

1) immer 사용 전

아래와 같이 스프레드 연산자를 통해 info 객체를 복사하여 붙여주고, 

map을 이용하여 id가 2인 사람을 찾아낸 후, 

또 스프레드 연산자를 통해 people객체를 복사하여 붙여 준 후,

add에 원하는 객체를 붙여 넣는다.

const nextState = {
    ...info,
    people: info.people.map((person) =>
      person.id === 2
        ? {
            ...person,
            add: person.add.concat({ job: "student" }),
          }
        : person
    ),
  };

위와 같은 형식은, 복잡하여 가독성이 매우 나쁘다...

 

2)immer 사용 후

아래와 같이 간단하게 바꿀 수 있다.

const nextState = produce(info, (draft) => {
    const person = draft.people.find((per) => per.id === 2);
    person.add.push({ job: "student" });
  });

 

> 자바스크립트에서 사용하는 연산자들을 그대로 쓸 수 있다.

> 가독성이 매우 좋다

 

3) useState와 immer 함께 쓸 때

> 더 간단하게 사용 할 수 있다. (produce함수에서 두 파라미터 생략 가능)

 

ImmerComponent.js

import React, { useState } from "react";
import produce from "immer";

const ImmerComponent = () => {
	//info 객체 초기화
  const [info, setInfo] = useState({
    job: [],
    age: "",
  });
	
    //버튼 클릭시 발생 이벤트
    //info.job배열에 객체 추가
  const onPush = () => {
    setInfo(
      produce((draft) => {
        draft.job.push({ job1: "student" });
      })
    );
  };

	//info.job 정보 출력
  console.log(info.job);

  return (
    <div>
      <button onClick={onPush}>Click!</button>
    </div>
  );
};

export default ImmerComponent;

 

버튼 클릭 전 콘솔창에는 빈배열 표시

 

버튼 클릭 후, 콘솔창에 {job1: 'student'} 객체 추가됨.