Immer

useReducer를 사용할때 중첩된 객체가 많으면 많을 수록 불변성의 특징으로 인해 코드가 복잡해진다.
좀 더 직관적인 방법으로 코드를 작성하고 싶다면 Immer를 사용하면 된다.
Immer는 직접 관리해야 되는 불변성을 대신 관리해준다고 생각하면 된다.
Immer github
Immer 공식문서
Immer React Hook으로 사용안내 github

Immer + useImmer 라이브러리 설치

(yarn)
yarn add immer use-immer

(npm)
npm install immer use-immer

useImmer 사용

useImmer을 사용할때는 불변성을 신경쓰지 않아도 되므로 더욱 직관적인 코드를 작성할 수 있다.

useState 사용 코드

import { useState } from "react";
import './Todo.css'

export default function Todo() {
  const [items, setItems] = useState(itemList);

  const handleUpdate = () => {
    const prev_cont = prompt('변경할 할일 입력');
    const cont = prompt('변경할 할일 입력');

    setItems(prev => prev.map(elm => {
      if(elm.cont === prev_cont) return ({...elm ,cont: cont});
      return elm
    }))
  }
  const handleAdd = () => {
    const cont = prompt('추가 할 할일 입력');
    
    setItems(prev => {
      return [...prev, {cont}]
    })

  }
  const handleRemove = () => {
    const cont = prompt('삭제 할 할일 입력');

    setItems(prev => prev.filter(elm => elm.cont !== cont));
  }

  return (
    <div className="container">
      <ul>
        {items.map((elm, idx) => 
          <li key={idx}>{elm.cont}</li>
        )}
      </ul>
      <div className="btn_box">
      <button onClick={handleUpdate}>할일 변경</button>
        <button onClick={handleAdd}>할일 추가</button>
        <button onClick={handleRemove}>할일 삭제</button>
      </div>
    </div>
  )
}

const itemList = [
  {
    id: '1',
    cont: '축구'
  },
  {
    id: '2',
    cont: '농부'
  },
  {
    id: '3',
    cont: '배구'
  }
]

useImmer 사용 코드

import { useImmer } from "use-immer";
import './Todo.css'

export default function Todo() {
  // useImmer는 보통 set이 아닌 update를 붙힌다. ex) updateItems
  const [items, updateItems] = useImmer(itemList)

  const handleUpdate = () => {
    const prev_cont = prompt('변경할 할일 입력');
    const cont = prompt('변경할 할일 입력');
    updateItems(prev => {
      for(let i of prev) {
        if(i.cont === prev_cont) i.cont = cont;
      }
    })
  }
  const handleAdd = () => {
    const cont = prompt('추가 할 할일 입력');
    updateItems(prev => {prev.push({cont})});
  }

  const handleRemove = () => {
    const cont = prompt('삭제 할 할일 입력');
    updateItems(prev => prev.filter(elm => elm.cont !== cont));
  }

  return (
    <div className="container">
      <ul>
        {items.map((elm, idx) => 
          <li key={idx}>{elm.cont}</li>
        )}
      </ul>
      <div className="btn_box">
        <button onClick={handleUpdate}>할일 변경</button>
        <button onClick={handleAdd}>할일 추가</button>
        <button onClick={handleRemove}>할일 삭제</button>
      </div>
    </div>
  )
}

const itemList = [
  {
    id: '1',
    cont: '축구'
  },
  {
    id: '2',
    cont: '농부'
  },
  {
    id: '3',
    cont: '배구'
  }
]