10.3.2.1 TodoInsert value 상태 관리하기

    TodoInsert 컴포넌트에서 인풋에 입력하는 값을 관리할 수 있도록 useState를 사용하여 value라는 상태를 정의하겠습니다. 추가로 인풋에 넣어 줄 onChange 함수도 작성해 주어야 하는데요. 이 과정에서 컴포넌트가 리렌더링될 때마다 함수를 새로 만드는 것이 아니라, 한 번 함수를 만들고 재사용할 수 있도록 useCallback Hook을 사용하겠습니다.

    TodoInsert.js

    import React, { useState, useCallback } from 'react';
    import { MdAdd } from 'react-icons/md';
    import './TodoInsert.scss';
     
    const TodoInsert = () => {
      const [value, setValue] = useState('');
     
      const onChange = useCallback(e => {
        setValue(e.target.value);
      }, []);
     
      return (
        <form className="TodoInsert">
          <input
            placeholder=" 일을 입력하세요"
            value={value}
            onChange={onChange}
          />
          <button type="submit">
            <MdAdd />
          </button>
        </form>
      );
    };
     
    export default TodoInsert;

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