12.1.4 App 컴포넌트에 immer 적용하기

    방금 만든 App 컴포넌트에 immer를 적용하여 더 깔끔한 코드로 상태를 업데이트해 봅시다. App.js를 다음과 같이 수정해 보세요.

    App.js

    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
          };
     
          // array  항목 등록
          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), 1);
            })
          );
        },
        [data]
      );
     
      return (...);
    };
     
    export default App;

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.