useImmer

useImmer?

useImmer는 상태 관리 라이브러리인 React의 Hooks를 사용하여 불변성을 유지하면서 상태를 쉽게 업데이트할 수 있도록 도와주는 라이브러리입니다.

이를 사용하면 상태를 직접 수정하는 대신 불변성을 유지하는 방식으로 상태를 업데이트할 수 있습니다.

 

useImmer 설치하기

먼저, useImmer를 설치해야 합니다. NPM을 사용하는 경우 다음과 같이 설치할 수 있습니다:

npm install immer

 

예시 코드

import React from 'react';
import { useImmer } from 'immer';

const TextList = () => {
  // useImmer로 상태 생성
  const [textList, setTextList] = useImmer([]);

  const addText = (newText) => {
    setTextList((draft) => {
      draft.push(newText); // 불변성을 유지하면서 배열에 새 항목 추가
    });
  };

  const deleteText = (index) => {
    setTextList((draft) => {
      draft.splice(index, 1); // 불변성을 유지하면서 배열에서 항목 삭제
    });
  };

  return (
    <div>
      <ul>
        {textList.map((text, index) => (
          <li key={index}>
            {text}{' '}
            <button onClick={() => deleteText(index)}>삭제</button>
          </li>
        ))}
      </ul>
      <button onClick={() => addText(`새로운 텍스트 ${textList.length + 1}`)}>
        추가
      </button>
    </div>
  );
};

export default TextList;

useImmer를 사용하여 textList라는 상태를 생성하고, addText 함수를 통해 새로운 텍스트를 목록에 추가하고 deleteText 함수를 통해 특정 텍스트를 목록에서 삭제합니다. useImmer를 사용하면 setTextList 함수를 호출할 때 자동으로 불변성을 유지하면서 상태를 업데이트할 수 있습니다.

 

사용하는 경우

1. 복잡한 상태를 가진 컴포넌트: 상태가 복잡하거나 중첩된 객체 또는 배열을 포함하는 경우, 상태를 직접 수정하는 것은 오류를 발생시키거나 예기치 않은 동작을 유발할 수 있습니다. 이러한 상황에서 useImmer를 사용하면 상태를 불변성을 유지하며 간편하게 업데이트할 수 있습니다.
2. 상태 변경 로직이 복잡한 경우: 상태를 업데이트하는 로직이 복잡한 경우에도 useImmer를 사용하여 코드를 더 간결하고 이해하기 쉽게 만들 수 있습니다
3. 성능 최적화가 필요한 경우: useImmer는 불필요한 렌더링을 방지하여 성능을 최적화하는 데 도움이 될 수 있습니다. 이를 통해 React 컴포넌트의 성능을 향상시킬 수 있습니다.

 

deps가 깊은 게 연관이 있을까?

deps가 깊은지 여부는 useImmer를 사용하는 기준이 아닙니다. 상태의 깊이가 깊을 때도 useImmer를 사용할 수 있고, 상태의 깊이가 얕을 때도 useImmer를 사용할 수 있습니다. useImmer는 상태의 구조에 상관없이 상태를 불변성을 유지하면서 간편하게 업데이트하는 데 도움을 줄 수 있습니다.

상태의 deps가 깊은 경우라면 React에서 제공하는 useCallback 등을 활용하여 콜백 함수를 적절히 최적화하는 것이 좋습니다. 또한, 상태 구조가 복잡하고 상태 업데이트 로직이 복잡할 때 useImmer를 함께 사용하여 코드를 더욱 깔끔하고 유지보수하기 쉽게 만들 수 있습니다.