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

KangRok Yoon·2023년 7월 26일
ImmerReact리액트
0
immer??
불변성은 뭐지?? 🤔🤔
왜 불변성을 지켜야 하지?? 🤔
1. immer를 설치하고 사용법 알아보기
1.1 immer를 사용하지 않고 불변성 유지
1.2 immer 사용법
1.3 App 컴포넌트에 immer 적용하기
1.4 useState의 함수형 업데이트와 immer 함께 쓰기
참고자료

리액트를 다루는 기술

목록 보기
9/10
post-thumbnail

immer??

immer란??? React에서 쉽게 불변성을 유지할 수 있는 코드 작성을 도와주는 라이브러리이다!

라이브러리는 특정 기능에 대한 도구 or 함수들을 모은 집합이다. 즉, 프로그래머가 개발하는데 필요한 것들을 모아둔 것이다.
Library는 프로그래머라면 누구나 한번쯤은 써봤을 것이며, 스스로 써보지 않았다라고 생각하는 사람도 라이브러리가 무엇인지 몰라서 그렇게 얘기하는 것일 뿐, 자기도 모르게 써보았을 것이다. 라이브러리와 프레임워크의 차이점

불변성은 뭐지?? 🤔🤔

리액트 컴포넌트에서 상태를 업데이트 할 때 불변성을 지키는 것은 매우 중요하함. '불변성을 지킨다' 라는 것은 기존의 값을 직접 수정하지 않으면서 새로운 값을 만들어 내는 것을 말한다.

왜 불변성을 지켜야 하지?? 🤔

렌더링 성능 최적화 방식 때문이다. 리액트에서 부모 컴포넌트가 업데이트될 경우, 그 밑의 자식 컴포넌트도 전부 업데이트(리렌더링)된다. 이는 변경사항이 따로 없음에도 자동적으로 함께 리렌더링이 된다.

만약 컴포넌트에서 처리하는 데이터 및 연산량이 많을 경우에는 이러한 성능 최적화에 더욱 신경을 써야 한다. 리액트의 Virtual DOM이 Props의 변화를 감지하기 위해, 이전의 Props와 새로 받아오는 Props를 비교한다.

불변성을 지키지 않고 객체나 배열을 직접 변경하면? 리액트의 Virtual DOM이 Props의 변화를 감지하지 못한다.

// example이란 상수에 객체를 대입
const example = {id: 1, text: '텍스트'};

// sameExample에 example을 대입
const sameExample = example;

// sameExample의 text를 변경
const sameExample.text = '같은 텍스트';

// sameExample의 text를 변경하니 example의 text도 그대로 변경 (불변성 유지 X)
// 같은 객체이기 때문에 비교해도 true가 나옴
console.log(example === sameExample); // true

이렇게 될 경우, 객체의 값이 아무리 바뀌어도 같은 객체로 인식하기 때문에 리액트의 Virtual DOM이 인식하지 못한다.

리액트, 리액트 네이티브에서의 불변성을 유지하는 건 매우 중요하며 아래의 방법을 통해 리액트 불변성 지키는 방법에 대해 알아보자

  • 객체의 불변성 지키기

const menu = {
id: 1,
name: 'pizza'
};
// 불변성 지키지 않는 경우

menu.name = 'chicken';
// 불변성 지킨 경우

const newMenu = {
...menu,
name: 'chicken'
}

위에서 처럼 ...spread 연산자를 통해 원래 menu 객체의 값을 그대로 복사하고, 새로 만든 newMenu에... menu로 객체의 값을 펼쳐 넣는다. 그리고 변경하고 싶은 값만 작성하면 자동으로 덮여 써진다.

  • 배열의 불변성 지키기

// 불변성을 지키지 않는 배열 예제
const numbers = [0, 1, 2]

numbers.push(3); //추가
numbers[2] = 5; //수정
numbers.splice(0,2); //삭제

리액트 배열에서 push, splice는 가급적 사용하지 않는다. 이는 모두 배열을 직접 수정하기 때문. 배열의 내장 함수를 통해 새로운 배열을 생성하여 상태를 업데이트해줘야 한다.

// 불변성을 지키는 배열 예제
const numbers = [0, 1, 2];

// 추가 (spread, concat)
const anotherNumbers = [...numbers, 3]
const anotherNumbers = numbers.concat([3, 4])

// 제거 (filter)
const filteredNumbers = numbers.filter(number => number > 0)
const filteredNumbers = numbers.filter((n, i) => i !== 1) // 인덱스 활용

// 수정 (map)
const mapNumbers = numbers.map(number => number === 0 ? 5 : number) // 값이 0이면 5로 변경, 나머지는 그대로

주로 배열의 불변성을 지키는 경우에는 위와 같은 배열의 내장 함수를 통해 추가, 제거, 수정을 한다.

여러 객체로 이루어진 배열을 다룰 때는

const items = [{ id: 1, text: '1번'}, {id: 2, text: '2번'}];

const newItems = items.map(item => item.id === 1 ? {...item, text: '1번 텍스트 변경'} : item);

배열 내부의 객체를 업데이트하는 경우에도 이와 같이 spread 연산자를 통해 불변성을 유지시켜줘야 한다.

하지만 객체의 구조가 엄청나게 깊어지면 불변성을 유지하면서 업데이트하는 것이 매우 힘들다. 그럴 때마다 전개 연산자를 여러 번 사용하는 것은 꽤 번거러운 작업이다. 가독성 또한 좋지 않다.

이러한 상황에 immer라는 라이브러리를 사용하면, 구조가 복잡한 객체도 매우 쉽고 짧은 코드를 사용하여 불변성을 유지하면서 업데이트해 줄 수 있다.

1. immer를 설치하고 사용법 알아보기

우선 터미널을 통해 immer를 설치해주자! 

$ npm i immer
$ yarn add immer

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

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

// App.js
import { useRef, useCallback, useState } from "react";

const App = () => {
const nextId = useRef(1);
const [form, setForm] = useState({name:'', username:''});
const [data, setData] = useState({
  array: [],
  uselessValue:null
});

// input 수정을 위한 함수 
const onChange = useCallback(
  e => {
    const {name, value} = e.target;
    setForm({
      ...form,
      [name]:[value]
    });
  },
  [form]
);

// form 등록을 위한 함수 
const onSubmit = useCallback(
  e => {
    e.preventDefault();
    const info = {
      id: nextId.current,
      name: form.name,
      username: form.username
    };

    // array에 항목 등록
    setData({
      ...data,
      array: data.array.concat(info)
    });

    // form 초기화 
    setForm({
      name:'',
      username:''
    });
    nextId.current += 1;
  },
  [data, form.name, form.username]
);

// 항목을 삭제하는 함수

const onRemove = useCallback(
  id => {
    setData({
      ...data,
      array: data.array.filter(info => info.id !== id)
    });
  },
  [data]
);
 
  return (
    <div>
      <form onSubmit={onSubmit}>
        <input
          name="username"
          placeholder="아이디"
          value={form.username}
          onChange={onChange}
        />
         <input
          name="name"
          placeholder="이름"
          value={form.name}
          onChange={onChange}
        />
        <button type="submit">등록</button>
      </form>
      <div>
        <ul>
          {data.array.map(info => (
            <li key={info.id} onClick={() => onRemove(info.id)}>
              {info.username} ({info.name})
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default App;

폼에서 아이디/이름을 입력하면 하단 리스트에 추가되고, 리스트 항목을 클릭하면 삭제되는 간단한 컴포넌트를 만들어봤다. 이렇게 전개 연산자와 배열 내장 함수를 사용하여 불변성을 유지하는 것은 어렵지만, 상태가 복잡해지면 조금 귀찮은 작업이 될 수도 있다.

1.2 immer 사용법

immer를 사용하면 불변성을 유지하는 작업을 매우 간단하게 처리할 수 있다. 이 라이브러리의 사용법은 다음과 같다.

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

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

  • 1.파라미터는 수정하고 싶은 상태
  • 2.파라미터는 상태를 어떻게 업데이트할지 정의하는 함수

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

이 라이브러리의 핵심은 '불변성에 신경 쓰지 않는 것처럼 코드를 작성하되 불변성 관리는 제대로 해 주는 것'이다. 단순히 깊은 곳에 위치하는 값을 바꾸는 것 외에 배열을 처리할 때도 매우 쉽고 편하다.

아래 코드는 좀 더 복잡한 데이터를 불변성을 유지하면서 업데이트하는 예시

import produce from 'immer';

const originalState = [
  {
    id:1,
    todo: '전개 연산자와 배열 내장 함수로 불변성 유지하기',
    checked:true,
  },
  {
    id:2,
    todo:'immer로 불변성 유지하기',
    checked: false,
  }
];

const nextState = produce(originalState, draft => {
  // id가 2인 항목의 checked 값을 true로 설정
  const todo = draft.find(t => t.id === 2); // id로 항목 찾기
  todo.checked = true;
  // 혹은 draft[1].checked = true;

  // 배열에 새로운 데이터 추가 
  draft.push({
    id: 3,
    todo: '일정 관리 앱에 immer 적응하기',
    checked:false,
  });

  // id = 1인 항목을 제거하기
  draft.splice(draft.findIndex(t => t.id === 1), 1);
});

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

// App.js
import { useRef, useCallback, useState } from "react";
import produce from 'immer';

const App = () => {
const nextId = useRef(1);
const [form, setForm] = useState({name:'', username:''});
const [data, setData] = useState({
  array: [],
  uselessValue:null
});

// input 수정을 위한 함수 
const onChange = useCallback(
  e => {
    const {name, value} = e.target;
    setForm(
      produce(form, draft => {
        draft[name] = value;
      })
    );
  },
  [form]
);

// form 등록을 위한 함수 
const onSubmit = useCallback(
  e => {
    e.preventDefault();
    const info = {
      id: nextId.current,
      name: form.name,
      username: form.username
    };

    // array에 새 항목 등록
    setData(
      produce(data, draft => {
        draft.array.push(info);
      })
    );

    // form 초기화 
    setForm({
      name:'',
      username:''
    });
    nextId.current += 1;
  },
  [data, form.name, form.username]
);

// 항목을 삭제하는 함수

const onRemove = useCallback(
  id => {
    setData(
     produce(data, draft => {
      draft.array.splice(draft.array.findIndex(info => info.id === id), 1);
     })
    );
  },
  [data]
);
 
  return (
    <div>
      <form onSubmit={onSubmit}>
        <input
          name="username"
          placeholder="아이디"
          value={form.username}
          onChange={onChange}
        />
         <input
          name="name"
          placeholder="이름"
          value={form.name}
          onChange={onChange}
        />
        <button type="submit">등록</button>
      </form>
      <div>
        <ul>
          {data.array.map(info => (
            <li key={info.id} onClick={() => onRemove(info.id)}>
              {info.username} ({info.name})
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default App;

immer를 사용하여 컴포넌트 상태를 작성할 때는 객체 안에 있는 값을 직접 수정하거나, 배열에 직접적인 변화를 일으키는 push, splice 등의 함수를 사용해도 무방하다. 그렇기 때문에 불변성 유지에 익숙하지 않아도 자바스크립트에 익숙하다면 컴포넌트 상태에 원하는 변화를 쉽게 반영시킬 수 있다. immer를 사용한다고 무조건 코드가 간결해지지는 않는다. onRemove의 경우에는 배열 내장 함수 filter를 사용하는 것이 코드가 더 깔끔하고, 굳이 immer를 적용할 필요가 없다. immer는 불변성을 유지하는 코드가 복잡할 때만 사용해도 충분!

1.4 useState의 함수형 업데이트와 immer 함께 쓰기

// 예시 코드
const [number, setNumber] = useState(0);
// prevNumber는 현재 number 값을 가리킵니다.
const onIncrease = useCallback(
    () => setNumber(prevNumber => prevNumber + 1),
    [],
);

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

// 예시 코드 
const update = produce(draft => {
    draft.value = 2;
});

const originalState = {
    value: 1,
    foo: 'bar',
};

const nextState = update(originalState);
console.log(nextState); // {value:2, foo:'bar'}

이러한 immer의 속성과 useState의 함수형 업데이트를 함꼐 활용하면 코드를 더욱 깔끔하게 만들 수 있다 . 

// App.js
import { useRef, useCallback, useState } from "react";
import produce from 'immer';

const App = () => {
const nextId = useRef(1);
const [form, setForm] = useState({name:'', username:''});
const [data, setData] = useState({
  array: [],
  uselessValue:null
});

// input 수정을 위한 함수 
const onChange = useCallback(
  e => {
    const {name, value} = e.target;
    setForm(
      produce(draft => {
        draft[name] = value;
      })
    );
  },
  []
);

// form 등록을 위한 함수 
const onSubmit = useCallback(
  e => {
    e.preventDefault();
    const info = {
      id: nextId.current,
      name: form.name,
      username: form.username
    };

    // array에 새 항목 등록
    setData(
      produce(draft => {
        draft.array.push(info);
      })
    );

    // form 초기화 
    setForm({
      name:'',
      username:''
    });
    nextId.current += 1;
  },
  [form.name, form.username]
);

// 항목을 삭제하는 함수

const onRemove = useCallback(
  id => {
    setData(
     produce(draft => {
      draft.array.splice(draft.array.findIndex(info => info.id === id), 1);
     })
    );
  },
  []
);
 
  return (
    <div>
      <form onSubmit={onSubmit}>
        <input
          name="username"
          placeholder="아이디"
          value={form.username}
          onChange={onChange}
        />
         <input
          name="name"
          placeholder="이름"
          value={form.name}
          onChange={onChange}
        />
        <button type="submit">등록</button>
      </form>
      <div>
        <ul>
          {data.array.map(info => (
            <li key={info.id} onClick={() => onRemove(info.id)}>
              {info.username} ({info.name})
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default App;

produce 함수의 파라미터를 함수 형태로 사용하니 코드가 더욱 깔끔해졌다~ !!

참고자료

리액트를 다루는 기술 - 김민준
https://mangkyu.tistory.com/4
https://letsgojieun.tistory.com/131

profile
KangRok Yoon
It's better to be a pirate than join the navy ☠️
이전 포스트

[React] 컴포넌트 성능 최적화

다음 포스트

[React] 리액트 라우터로 SPA 개발하기

0개의 댓글

Powered by GraphCDN, the GraphQL CDN