typescript 공부 4

import React, { useState } from 'react';

function App() {
  const [userName, setUserName] = useState('');
  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const {
      currentTarget: { value },
    } = event;
    setUserName(value);
  };
  const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    console.log(`hello ${userName}`);
  };
  return (
    <div>
      <form onSubmit={onSubmit}>
        <input
          onChange={onChange}
          value={userName}
          type="text"
          placeholder="username"
        />
        <button>Log in</button>
      </form>
    </div>
  );
}

export default App;

원래는 인자에 e만 넣었어도 됐는데 typescript에서는 event도 따로 지정을 해주어야한다.

 

React.~~Event로 특정 이벤트를 지정해주고, 어떤 태그에 사용되는지도 지정해준다. <HTMLInputElement>

 

  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const {
      currentTarget: { value },
    } = event;
    setUserName(value);
  };

여기선 currentTarget에 value만 있었기에 위 문법이 쓸모없어 보이더라도,

currentTarget안에 value, name, age, etc... 다양한 값들이 들어있다면, 그때는 좋아 보일 수도 있다.

  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const {
      currentTarget: { value, name, age, etc },
    } = event;
    setValue(value);
    setName(name);
    setAge(age);
    setEtc(etc);
  };

좀더 직관적으로 변수에 접근할 수 있다.