Immer를 사용하여 간결한 업데이트 로직 작성하기

Immer에서 제공하는 draft는 "기록"하는 특수한 종류의 객체입니다. draft를 자유롭게 변이시킬 수 있는 이유입니다!

내부적으로 Immer는 draft에서 변경된 부분을 찾아내고, 편집한 내용을 포함하는 완전히 새로운 객체를 생성합니다.

 

1. npm install use-immer를 실행하여 의존성으로 Immer를 추가합니다.
2. 그런 다음 import { useState } from 'react'를 import { useImmer } from 'use-immer'로 바꿉니다.

 

import { useImmer } from 'use-immer';

export default function Form() {
  const [person, updatePerson] = useImmer({
    name: 'Niki de Saint Phalle',
    artwork: {
      title: 'Blue Nana',
      city: 'Hamburg',
      image: 'https://i.imgur.com/Sd1AgUOm.jpg',
    }
  });

  function handleNameChange(e) {
    updatePerson(draft => {
      draft.name = e.target.value;
    });
  }

  function handleTitleChange(e) {
    updatePerson(draft => {
      draft.artwork.title = e.target.value;
    });
  }

  function handleCityChange(e) {
    updatePerson(draft => {
      draft.artwork.city = e.target.value;
    });
  }

  function handleImageChange(e) {
    updatePerson(draft => {
      draft.artwork.image = e.target.value;
    });
  }

  return (
    <>
      <label>
        Name:
        <input
          value={person.name}
          onChange={handleNameChange}
        />
      </label>
      <label>
        Title:
        <input
          value={person.artwork.title}
          onChange={handleTitleChange}
        />
      </label>
      <label>
        City:
        <input
          value={person.artwork.city}
          onChange={handleCityChange}
        />
      </label>
      <label>
        Image:
        <input
          value={person.artwork.image}
          onChange={handleImageChange}
        />
      </label>
      <p>
        <i>{person.artwork.title}</i>
        {' by '}
        {person.name}
        <br />
        (located in {person.artwork.city})
      </p>
      <img 
        src={person.artwork.image} 
        alt={person.artwork.title}
      />
    </>
  );
}

 

 

이벤트 핸들러가 훨씬 간결해진 것을 알 수 있습니다. useState와 useImmer를 원하는대로 혼합하여 단일 컴포넌트에서 사용할 수 있습니다. Immer는 상태의 중첩 여부와 객체 복사가 반복적으로 발생하는 경우 업데이트 핸들러를 간결하게 유지하는 훌륭한 방법입니다.