사용자 입력을 받기 위해 <form>을 사용하는 경우이다.
useState훅 으로 사용자 입력을 관리할 수도 있지만, useRef 훅을 이용해 사용자
입력을 관리하려고 했다. (useState와 useRef로 사용자 입력 관리하기)
const textInputRef = useRef(null) useRef에는 제네릭타입을 설정해 주어야 한다.
그러기 위해서 ref에 어떤 데이터가 들어갈 것인가?를 생각해보아야 한다.
이번 연습 프로젝트에서는<input>요소를 다루고 있으므로 <HTMLInputElement>을 설정해 줘야 한다.
const textInputRef = useRef<HTMLInputElement>(null);그래도 아래에서 submitHandler 함수를 통해 값을 가져오고자 하면 에러가 발생한다.
위에서 current 속성을 가진 ref 객체를 담아주기 위해 textInputRef를 선언했고
아래의 JSX에서는 <input ref={textInputRef} ... > DOM 요소를 연결한다.
즉 우리는 form이 제출되기전에 아래의 JSX(input) 요소가 렌더링되는 사실을 알지만 타입스크립트는 알지 못한다.
타입스크립트 입장에서는 함수 컴포넌트의 return (...)을 만나기 전, submitHandler 함수 선언문 바로 아래에서 submitHandler()처럼 함수를 호출하는 코드가 있을 수도 있는 것이다.
이렇게 되면 JSX 요소들이 렌더링되기 전에 submitHandler 함수를 호출하는 것이므로 아직 ref 객체가 연결되지 않은 상태인 것이다.
즉 textInputRef.current가 null이 될 수도 있기 때문에 발생하는 에러이다.
const enteredText = textInputRef.current!.value;!를 이용해 타입 스크립트에게 이 값이 설정될 것이라는 것을 알려주면 에러는 해결된다.
