React + Typescript (3) Ref & useRef 사용하기

Form input 받을 때 Ref 사용하기

useRef는 바닐라 자바스크립트의 getElementById나 querySelector와 같이 특정 DOM 요소에 접근할 때 혹은 리렌더링 없이(내부 변수의 초기화 없이) 데이터를 저장하고 싶을 때 사용한다.

아래 코드는 현재 form 컴포넌트의 코드다

import { useRef } from 'react'

const NewTodo = () => {
    const todoTextInputRef = useRef();

    const submitHandler = (e: React.FormEvent) => {
        e.preventDefault();


    }

    return (
        <form onSubmit={submitHandler}>
            <label htmlFor="text">Todo text</label>
            <input type="text" id="text" ref={todoTextInputRef}></input>
            <button>Add Todo</button>
        </form>
    );
};

export default NewTodo;

현재는 ref={todoTextInputRef 구문에서 에러가 발생한다.
이유는 상단의 const todoTextInputRef = useRef(); 구문에서 만든 레퍼런스가 어떤 타입인지 알 수 없기 때문이다.

HTMLInputElement

생성한 레퍼런스에 타입을 알려주자.
역시나 리액트에서 이미 제공하고 있다.
HTMLInputElement제네릭을 사용하자.

const todoTextInputRef = useRef<HTMLInputElement>();

이제 todoTextInputRef는 input요소라는 타입을 갖고 리액트도 이를 알게되었다.
하지만 하단의 ref={todoTextInputRef} 구문에서는 아지도 오류가 발생한다.

초기값 설정

이유는 초기값을 설정하지 않았기 때문이다.
어떤 값이 들어올지 알 수 없기 때문에 초기값까지 설정해줘야 한다.
아직 값을 연결하지 않았으니 null로 초기값을 설정해주면 해결된다.

const todoTextInputRef = useRef<HTMLInputElement>(null);

리액트 + 타입스크립트에서 useRef의 사용법을 알아봤다.
타입스크립트는 더 명확하게 모든 것을 설정해야하는 것 같다.