3. React와 함께 TypeScript 사용하기(2), [ useRef 와 양식 제출, event ]

useRef 를 이용한 양식 제출

 

    import React from "react";
    import { useRef } from "react";

    const NewTodo: React.FC = () => {
      const textRef = useRef<HTMLInputElement>(null); 	// 1*

      const submitHandler = (event: React.FormEvent) => {	// 2*
        event.preventDefault();

        const textData = textRef.current?.value; 	// 3* ? 가 있는 이유. ?는 자동생성

        console.log(textData);
      };
      return (
        <div>
          <form onSubmit={submitHandler}>
            <div>
              <label htmlFor="todoText"></label>
              <input type={"text"} id={"todoText"} ref={textRef} />
            </div>
            <div>
              <button> 제출 </button>
            </div>
          </form>
        </div>
      );
    };

    export default NewTodo;

1*. 특수한 타입의"HTML 요소"(우리가 연결한 것은 INPUT 타입 이므로)를 받을 타입,
	"HTMLInputElement 타입" 은 기본적인 "INPUT" 의 타입이다.
    타입스크립트도, 리액트도 아닌, "기본 INPUT 의 본래 타입"이다.
    
    또한, useRef 로 받은 값이, 아무것도 없을 수 있으므로,
    확실히 해야하는 타입스크립트의 특성상 "반드시 초기값도 지정"해야한다
    
2*. 특수타입의 event 를 받는 타입

3*. 현 상태(코드가 그곳을 읽고 있는 상태)에서는 Ref 가 어떠한 값이 있을지 모르므로 [아는것은 개발자인 나 뿐]
    접근(새 값이 들어갔는가)이 가능 한지 한번 읽어보고, 접근이 가능 하면(새 값이 들어갔다면 새 값을) 저장한다는 뜻
    submitHandler 가 시작되어, 코드가 읽히는 시점에, 반드시 새 값이 들어간다 라고 확신한다면 ? 를 ! 로 바꾸어 주어도 된다.
    ?를 ! 로 바꾸면 "이 시점 에는 반드시" null 이 아니라 새 값이 들어갔다! 라고 타입스크립트에게 알리는 것이다
    ! 로 바꾸면 textData 의 타입이 string | undefined 에서, 
    	string 만 있는 타입으로 변한다. [확실히 들어 갈 것이라고 알렸으므로, 결과값의 타입이 정해짐]