Input 값을 관리하는 Custom Hooks를 만들어봅시다.

lib 디렉토리에 Custom Hooks인 useInput.js 파일을 만들고 아래와 같이 작성해봅시다.

• src/lib/useInput.js

import { useState } from 'react';

const useInput = (initialValue) => {
  const [value, setValue] = useState(initialValue);

  const onChange = e => {
		// Destructing Assignment
    const { target: { value } } = e;
    setValue(value);
  }

  return [ value, setValue, onChange ];
}

export default useInput;

Custom Hooks은 보통 파일 이름에 use를 붙이는 것이 관례이고, 저희가 만들 Hooks은 input 값을 관리하는 데 사용되므로 파일 이름을 useInput이라고 지정했습니다. 그럼 코드를 하나하나 해석해보겠습니다.

코드 해석

• 4번줄 - const [value, setValue] = useState(initialValue);
• 6~10번줄 - onChange 함수
• 12번줄 - 상태 값, 그 값을 바꿔주는 함수, input 값이 변경되었을 때 실행시켜줄 함수를 반환합니다.

그럼 이제 App 컴포넌트로 돌아와 아래와 같이 수정해주세요.

• src/App.js