[TypeScript] - UseRef로 입력값 받아오기

React에서 사용자가 입력한 값을 받아오는 방법은 크게 두가지로 나뉜다.

1. useState() - 사용자가 입력할 때마다 값 받아오기
2. useRef() - 사용자가 입력을 마치고 Submit 버튼 누를 때 값 한번에 받아오기

useState() 를 사용하는 방법은 한글자 한글자 업데이트 될 때마다 유효성을 검사해서 조치를 취할 수 있다는 장점이 있다. (ex. 비밀번호 입력 받을 때)

하지만 input의 개수가 많을 때 모두 useState() 를 적용하면 사이트의 속도가 느려질 위험이 있다. 따라서 굳이 유효성 검사를 할 필요가 없는 input의 경우 useRef() 를 사용하는 것이 좋은 방법이다.

useRef 사용하는 방법

타입스크립트에서 useRef() 를 사용하는 방법이 복잡하진 않았다.

Todo 앱에서 input을 받는 NewTodo 컴포넌트를 간단하게 구현했다.

import React, { useRef } from 'react';

const NewTodo = () => {
  // input을 받으므로 HTMLInputElement의 제너릭 타입으로 설정해준다.
  const todoTextInputRef = useRef<HTMLInputElement>(null);
  
  // form 에서 주어지는 매개변수이므로 FormEvent의 타입으로 설정해준다.
  const submitHandler = (event: React.FormEvent) => {
    event.preventDefault();
    const enteredText = todoTextInputRef.current!.value;
  };
  return (
    <form onSubmit={submitHandler}>
      <input type='text' ref={todoTextInputRef} />
      <button>Add Todo</button>
    </form>
  );
};

export default NewTodo;

코드 설명

• useRef() 의 타입을 제너릭으로 설정할 수 있다. 여기서는 input에서 입력된 값이 들어갈 예정이므로 HTMLInputElement 의 제너릭 타입으로 설정한다.

• form이 submit 될 때 submitHandler() 함수가 실행된다. 여기서 들어오는 event 매개변수의 타입은 React.FormEvent 으로 설정해준다.

• const enteredText = todoTextInputRef.current!.value
  위는 사용자의 입력값을 받아오는 코드이다.
  우리가 useRef() 의 초기값을 null로 설정했기 때문에 타입스크립트는 value의 존재를 확신하지 못한다. 하지만 useRef() 와 input이 연결된 시점에는 value가 무조건 존재한다. (값을 입력하지 않아도 빈 문자열로 존재한다.)
  따라서 물음표 대신 느낌표를 사용해서 타입스크립트에게 확신을 심어줄 수 있다.