immer를 사용한 불변성 유지

  상태가 복잡할때 불변성을 유지하면서 업데이를 하게 되면 코드가 복잡해 지고 가독성이 저하 된다. 이때 immer라이브러리를 사용하면 좀 더 쉽게 불변성을 유지하면서 업데이트를 진행할 수 있다. immer라이브러리의 핵심은 불변성을 신경쓰지 않는것 처럼 코드를 작성하되 불변성 관리를 제대로 해주는것이다.

//Example code
import produce form 'immer';
const originalState = [
    {
        id: 1,
        todo: '1',
        checked: true,
    },
    {
        id: 2,
        todo: '2',
        checked: false,
    },
];
 
//immer는 produce라는 함수를 사용한다
//첫번째 파라미터는 수정하고 싶은 상태
//두번째 파라미터는 상태를 어떻게 업데트 할지 정의하는 함수
const nextState = produce(originalState, (draft) => {
    const odo = draft.find((t) => t.id === 2);
    todo.checked = true;
    draft.push({
        id: 3,
        todo: '3',
        checked: false,
    });
    draft.splice(draft.findIndex((t) => t.id === 1), 1);
});

다음과 같은 코드가 있다고 해보자

import logo from './logo.svg';
import './App.css';
import React, {useRef, useCallback, useState} from 'react';
 
const App = () => {
  const nextId = useRef(1);
  const [form, setForm] = useState({name: '', username: ''});
  const [data, setData] = useState({
    array: [],
    uselessValue: null,
  });
  //input 수정을 위한 함수
  const onChange = useCallback(
      (e) => {
        const {name, value} = e.target;
        setForm({
          ...form,
          [name]: [value]
        });
      },
      [form]
  );
  //form등록을 위한 함수
  const onSubmit = useCallback(
      (e) => {
        e.preventDefault();
        const info = {
          id: nextId.current,
          name: form.name,
          username: form.username,
        };
 
        setData({
          ...data,
          array: data.array.concat(info),
        });
 
        //form 초기화
        setForm({
          name: '',
          username: '',
        });
        nextId.current += 1;
      },
      [data, form.name, form.username]
  );
  //항목을 삭제하는 함수
  const onRemove = useCallback(
      (id) => {
        setData({
          ...data,
          array: data.array.filter(info => info.id !== id)
        });
      }, [data]
  );
  return (
    <div>
      <form onSubmit={onSubmit}>
        <input name={"username"}
               placeholder={"ID"}
               value={form.username}
               onChange={onChange}
        />
        <input name={"name"}
               plcaeholder={"name"}
               value={form.name}
               onChange={onChange}
        />
        <button type={"submit"}>submit</button>
      </form>
      <div>
        <ul>
          {data.array.map((info) => (
              <li key={info.id} onClick={() => onRemove(info.id)}>
                {info.username} ({info.name})
              </li>
          ))}
        </ul>
      </div>
    </div>
  );
}
 
export default App;
 

이 코드에 immer를 적용하면 다음과 같이 된다.

import logo from './logo.svg';
import './App.css';
import React, {useRef, useCallback, useState} from 'react';
import produce from 'immer';
 
const App = () => {
  const nextId = useRef(1);
  const [form, setForm] = useState({name: '', username: ''});
  const [data, setData] = useState({
    array: [],
    uselessValue: null,
  });
  //input 수정을 위한 함수
  const onChange = useCallback(
      (e) => {
        const {name, value} = e.target;
        setForm(
            produce(form, draft => {
                draft[name] = value;
            })
        );
      },
      [form]
  );
  //form등록을 위한 함수
  const onSubmit = useCallback(
      (e) => {
        e.preventDefault();
        const info = {
          id: nextId.current,
          name: form.name,
          username: form.username,
        };
 
        setData(
            produce(data, draft => {
                draft.array.push(info);
            })
        );
 
        //form 초기화
        setForm({
          name: '',
          username: '',
        });
        nextId.current += 1;
      },
      [data, form.name, form.username]
  );
  //항목을 삭제하는 함수
  const onRemove = useCallback(
      (id) => {
        setData(
            produce(data, draft => {
                draft.array.splice(draft.array.findIndex(info => info.id === id));
            })
        );
      }, [data]
  );
  return (
    <div>
      //...
    </div>
  );
}
 
export default App;
 

useState의 함수형 업데이트와 immer함께 쓰기

  produce함수를 호출할 때 첫번째 파라미터가 함수 형태이면 업데이트 함수를 반환한다. 

import logo from './logo.svg';
import './App.css';
import React, {useRef, useCallback, useState} from 'react';
import produce from 'immer';
 
const App = () => {
  //...
  //input 수정을 위한 함수
  const onChange = useCallback(
      (e) => {
        const {name, value} = e.target;
        setForm(
            produce(draft => {
                draft[name] = value;
            })
        );
      },
      [form]
  );
  //form등록을 위한 함수
  const onSubmit = useCallback(
      (e) => {
       //...
 
        setData(
            produce(draft => {
                draft.array.push(info);
            })
        );
 
        //form 초기화
        setForm({
          name: '',
          username: '',
        });
        nextId.current += 1;
      },
      [data, form.name, form.username]
  );
  //항목을 삭제하는 함수
  const onRemove = useCallback(
      (id) => {
        setData(
            produce(draft => {
                draft.array.splice(draft.array.findIndex(info => info.id === id));
            })
        );
      }, [data]
  );
  return (
    <div>
      //...
    </div>
  );
}
 
export default App;