[React] 12장. immer를 사용하여 더 쉽게 불변성 유지하기

겨레·2024년 11월 27일

리액트

[React] 리액트 스터디

목록 보기

70/95

📍 immer
immer는 리액트에서 구조가 복잡한 객체도 쉽고 짧은 코드를 사용해 불변성을 유지하면서 업데이트하기 위해 사용하는 라이브러리이다.

불변성이란?
- 사전적 의미: 값이나 상태를 변경할 수 없음
- 프로그래밍에서의 의미: 메모리 영역에서 값이 변하지 않도록 하는 것
React에서 불변성을 유지해야 하는 이유는?
- 그전에 자바스크립트 메모리 구조를 확인해보자

자바스크립트 메모리 구조를 확인했다면, 불변성을 지킨다는 의미가 '메모리 영역에서 값을 변경할 수 없게 한다.'라는 것을 알 수 있을 것이다.

리액트는 콜스택 주소 값 비교해서 상태 변화를 감지하는데, 이를 얕은 비교라고 한다.

리액트는 상태를 업데이트할 때, 기존 값과 새로운 값에 대해 참조값(주소값)에 대해서만 비교하는 '얕은 비교'라는 것을 한다.

👉 이게 리액트의 state를 빠르게 감지할 수 있게 하고, 불변성을 유지해야 하는 이유이다.

하지만 참조타입의 경우에는 참조타입 값만 변경하면 실제 콜스택 주소 값 변경이 없어 state가 감지되지 않아 리렌더링이 되지 않는다.... 그래서 spread 연산자를 사용하고, immer 라이브러리를 사용하는 것이다.

📍 immer 라이브러리 설치

npm install immer

라이브러리를 설치했다면 immer를 연습할 새로운 리액트 프로젝트를 생성해주자!

책에 나온 예제는 내가 아직 이해하기 어려워서 완전 간단한 예제로 확인해보려고 한다.
(사실 책에 나온 것도 쉬운 것 같은데 ㅠㅠ )

내 예제보다 공식 문서 예제가 더 참고하기엔 좋을 것 같다...

① immer를 사용하지 않고 불변성 유지

immer를 사용하지 않고 불변성을 유지하면서 값을 업데이트하는 컴포넌트를 작성해보자~

예시 App_immer.jsx

import React, { useRef, useCallback, useState } from 'react';
 
// 1-2) 간단 예제
const App_immer = () => {

  // useState 기본 구조 => const [현재 상태값, 상태를 업데이트하는 함수] = useState(초기값);
  const [data, setData] = useState([1, 2, 3]);

  // 항목 추가 버튼 누르면 item이 추가됨
  const addItem = () => {
    // 배열의 불변성 유지 => 새로운 배열을 만들어서 상태를 업데이트
    // setData => data 상태 업데이트
    // [...data] => 기존 배열을 복사해서 새로운 배열을 만듦
    setData([...data, data.length + 1]);
  };

  return (
    <div>
      <button onClick={addItem}>항목 추가</button>
      <ul>
        {data.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
};

항목 추가 버튼을 누르면 기존 배열 [1, 2, 3] 뒤에 [4, 5, 6 ...] 숫자가 이어져서 추가되는 것을 볼 수 있다.

setData([...data, data.length + 1]);

✔ setData는 date의 상태를 업데이트 해 주는데,
✔ 기존 배열을 복사(...data)해서
✔ 새로운 배열(data.length + 1)을 만든다.

지금 코드는 간단해서 저대로 사용해도 괜찮지만, 만약 상태가 복잡해진다면?? 아무래도 작업이 귀찮아질 수 있다....

이를 예방하기 위해 immer를 사용한다. immer를 사용하면 불변성을 유지하는 작업을 매우 간단하게 처리할 수 있다.

📍 immer 사용법
// 예시 코드
// import produce from 'immer'; // 임포트 해주기
import { produce } from '../node_modules/immer/dist/immer';
const nextState = produce(originalState, draft => {
  // 바꾸고 싶은 값 바꾸기
  draft.somewhere.deep.inside = 5;
})
👉 produce라는 함수는 두 가지 파라미터를 받음

✔ 첫 번째 파라미터
: 수정하고 싶은 상태

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

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

이 라이브러리의 핵심은 ‘불변성에 신경 쓰지 않는 것처럼 코드를 작성하되 불변성 관리는 제대로 해 주는 것’이다.

단순히 깊은 곳에 위치하는 값을 바꾸는 것 외에 배열을 처리할 때도 매우 쉽고 편하다.

② App 컴포넌트에 immer 적용하기

App_immer.jsx
App_immer.jsx를 다음과 같이 수정해보자!

// =================================
// 12장. immer 예제코드
// =================================
import React, { useRef, useCallback, useState } from 'react';
import { produce } from '../node_modules/immer/dist/immer'; // import 
// 1-2) 간단 예제
const App_immer = () => {
  // useState 기본 구조 => const [현재 상태값, 상태를 업데이트하는 함수] = useState(초기값);
  const [data, setData] = useState([1, 2, 3]);

  // [2] immer 적용
  const addItem = () => {
    setData(
      produce(data, (draft) => {
        draft.push(data.length + 1);
      }),
    );
  };

 
  return (
    <div>
      <button onClick={addItem}>항목 추가</button>
      <ul>
        {data.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
};

export default App_immer;