Immer를 사용하여 컴포넌트의 상태 업데이트하기

27 Sep 2023

immer

컴포넌트의 상태 업데이트는 리액트 애플리케이션 개발에서 핵심적인 부분입니다. 이를 효율적으로 처리하기 위해 Immer 라이브러리를 사용할 수 있습니다. Immer는 불변성을 유지하면서 상태를 업데이트할 수 있는 간편한 방법을 제공합니다.

Immer란?

Immer는 리액트와 함께 사용하기 위해 개발된 라이브러리로, 불변성 유지를 간편하게 처리할 수 있습니다. 일반적으로 리액트에서 상태를 업데이트할 때는 기존 상태를 변경하지 않고 새로운 상태를 반환하는 방식을 사용합니다. 그러나 이러한 방식은 상태를 업데이트하는 로직을 작성하는 것이 번거롭고 복잡할 수 있습니다.

Immer를 사용하면 기존 상태를 직접적으로 변경할 수 있으며, 내부에서 변경된 부분을 자동으로 추적하여 새로운 상태를 생성합니다. 이렇게 함으로써 상태 업데이트 로직을 더욱 간단하고 직관적으로 작성할 수 있습니다.

Immer 사용하기

먼저 Immer 라이브러리를 설치합니다.

npm install immer

컴포넌트에서 Immer를 import합니다.

import produce from 'immer';

상태 업데이트 로직을 작성하는 함수를 생성합니다. 이 함수는 기존 상태를 인자로 받아 새로운 상태를 반환합니다.

const updateState = (prevState) => {
  // prevState를 변경하고 새로운 상태를 반환하는 로직을 작성합니다.
  return produce(prevState, (draftState) => {
    draftState.name = 'John Doe';
    draftState.age = 30;
    draftState.address.city = 'Seoul';
  });
}

컴포넌트에서 상태를 업데이트하는 함수를 호출하고 결과를 적용합니다.

import React, { useState } from 'react';

const App = () => {
  const [state, setState] = useState({
    name: 'Jane Doe',
    age: 25,
    address: {
      city: 'Busan',
      country: 'South Korea',
    },
  });

  const handleUpdate = () => {
    const newState = updateState(state);
    setState(newState);
  };

  return (
    <div>
      <h1>{state.name}</h1>
      <p>Age: {state.age}</p>
      <p>City: {state.address.city}</p>
      <button onClick={handleUpdate}>Update</button>
    </div>
  );
}

export default App;

결론

Immer를 사용하여 컴포넌트의 상태를 업데이트하면, 불변성을 유지하는 것보다 더욱 간편하게 상태를 업데이트할 수 있습니다. 리액트 애플리케이션 개발에서 상태 관리를 효율적으로 처리하기 위해 Immer를 적극적으로 활용해 보세요.

#Immer #리액트 #불변성 #상태업데이트