타입스크립트 타입 지정

useRef타입 지정

const buttonRef = useRef([]);

[]은 never 사용할 수 없는 오류라고 나온다.
=> [] 빈 배열은 타입이 될 수 없기 때문에 오류가 발생하는 것

const buttonRef = useRef<"HTMLButtonElement">(null);

=> Dom요소에 접근하여 사용되는 엘리멘탈을 접근하여
초기값을 null로 지정해야 오류가 나지 않는다.

EventHandler 타입 지정

function handleChange(e: ChangeEvent<'HTMLInputElement'>) {
const nextValue = e.target.value;
setValue(nextValue);
}

=> changeEvent에서는 레엑트에서 제공하는 ChangeEvent를 사용한다. import는 꼭 해야줘야 하는거 잊지말자.

interface Props {
className?: string;
value?: string;
onChange: (e:changeEvent<'HTMLInputElement'>) => void;
}

Props로 전달해주는 속성이다. onChange의 타입을 해줄때 마찬가지로 onChange에 changeEvent의 타입을 부여하고 더 구체적으로 명시할때는 DOM 엘리멘탈도 추가한다.