Next.js + TypeScript ) event 의 Type은 어떻게 지정해야할까?

Next.js (React) + TypeScript : Event Type 지정하기

Input Event

Input 태그에는 onChange, onKeyUp, onKeyDown 등의 이벤트가 있습니다. 이 이벤트를 통해 함수를 실행할 때에는

onChange

const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { value } = e.target;
    setInput(value);
  };

onKeyDown, onKeyUp

const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    // ...
}

const onKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
    // ...
}

위와 같이 이벤트의 타입을 지정해주면 됩니다.

Select Event

<select onChange={(e) => handleChange(e)}>
  <option key="A" value="A">
    A
  </option>
  <option key="B" value="B">
    B
  </option>
</select>

위와 같은 select box 태그의 event 타입을 지정해줄 때에는
다음과 같이 React.ChangeEvent<HTMLSelectElement> 를 통해 타입을 지정해 줄 수 있습니다.

const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    setValue(e.target.value);
  };

Input File Event

file 타입을 업로드하는 input 의 경우 e.target.files 가 아닌 e.currentTarget.files 를 사용합니다.

const saveFileImage = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.currentTarget.files !== null) {
      setFileImage(URL.createObjectURL(e.currentTarget.files[0]));
    }
  };