[리액트 마스터 클래스] React+TypeScript로 간단한 폼 만들기

React와 TypeScript를 사용하여 간단한 폼을 만들어보자! 아래의 코드는 사용자가 버튼을 클릭하면 콘솔에 사용자 이름이 로그되는 코드이다.

상태 설정

useState 훅을 사용하여 username 상태를 설정한다.

const [username, setUsername] = useState("");

onChange 핸들러

event가 input 요소의 이벤트 객체임을 TypeScript에게 알려준다.

const onChange = (event: React.FormEvent<HTMLInputElement>) => {
	const {currentTarget: { value }} = event;
    setUsername(value);
};

객체 구조 분해를 사용하여 event 객체에서 currentTarget을 가져오고, currentTarget에서 value를 가져온다.

onSubmit 핸들러

event가 form 요소의 이벤트 객체임을 TypeScript에게 알려준다.

const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
  event.preventDefault();
  console.log("hello", username);
};

콘솔에 "hello" 문자열과 username을 출력한다.

렌더링

간단한 로그인 폼을 렌더링한다. 사용자가 input 필드에 값을 입력하면 onChange 핸들러가 호출되고, Login버튼을 클릭하면 onSubmit 핸들러가 호출된다.

  return (
    <div>
      <form onSubmit={onSubmit}>
        <input
          value={username}
          onChange={onChange}
          type="text"
          placeholder="username"
        />
        <button>Login</button>
      </form>
    </div>
  );