useImmer - useState의 참조 값 복사를 쉽게 해주는 라이브러리

 

useState 는 참조 값을 변경할 때 복사해서 사용해야 하는 번거로움이 있다.

function App(props) {

  const [numberObject, setNumberObject] = useState({ number: 0 });

  function handleNumberObjectChange() {
    // 이렇게 사용하면 안됨
    // numberObject.number = numberObject.number + 1;
    // setNumberObject(numberObject);

    // 복사해서 써야함
    const newNumberObject = { ...numberObject };
    newNumberObject.number = newNumberObject.number + 1;
    setNumberObject(newNumberObject);
  }

 

하지만 useImmer 이런 번거로움을 덜어주는 라이브러리 이다.

 

터미널에서 useImmer를 인스톨 해준다.

npm install immer use-immer

 

useState 처럼 똑같이 useImmer 선언해 사용 하면 되고 useImmer set 함수는 update 함수로 작성된다.

function App(props) {
	
  // useImmer 사용, set => update
  const [numberObject, updateNumberObject] = useImmer({ number: 0 });

  function handleNumberObjectChange() {
    // useState는 복사해서 써야함
    const newNumberObject = { ...numberObject };
    newNumberObject.number = newNumberObject.number + 1;
    setNumberObject(newNumberObject);
    
    // useImmer는 별도 복사 필요 없이 바로 변경 가능
    // draft로 선언한 인자값은 numberObject가 복사된거라고 보면 된다.
    updateNumberObject(draft => draft.number = 10)
  }