typescript를 사용할 때 react에서 useRef를 사용하는 법.

문제

velopert의 튜토리얼을 진행하던 중 문제에 봉착했다.
이 튜토리얼에서는 useRef를 사용하여 input DOM을 선택하여 어떤 버튼을 눌렀을 때에 input에 focus가 되도록 하는 법을 가르쳐 준다.
이 코드의 일부를 가져와보겠다.

const nameInput = useRef();
const onChange = (event) => {
        const { name, value } = event.target;
        //...
    };
// ...
<input
        name="name"
        placeholder="이름"
        onChange={onChange}
        value={name}
        ref={nameInput}
      />
// ...

typescript를 사용할 때에는 처음 nameInput을 선언시 type을 지정해줘야한다. input의 ref로 들어가는 변수의 type, onChange 에 들어갈 인자의 type을 알기 힘들다는 문제에 부딧혔다.

해결

1. userRef<HTMLInputElement>()를 넣어서 nameInput을 만든다. 여기서 <HTMLInputElement>를 넣은 이유는 가지고 올 Element가 inputElement이기 때문이다.
2. onChange에 들어갈 event의 type은 참고를 보고 확인하였다. React.ChangeEvent<HTMLInputElement>이 그 type이다.

typescript로 구현한 코드를 한번 보자.

const nameInput = useRef<HTMLInputElement>();
const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        const { name, value } = event.target;
        //...
    };
// ...
<input
        name="name"
        placeholder="이름"
        onChange={onChange}
        value={name}
        ref={nameInput}
      />
// ...

마지막으로

onChange 부분은 결국 검색을 통해 해결을 했다. 하지만 vscode에서 주는 힌트로 알 수 있는 방법도 있다고 들었는데 어떻게 하면 알 수 있을까.. 누가 공유해줬으면 참 좋겠다 ㅎㅎ