[React] TypeScript 타입검사(2)

깃허브 블로그 테마 적용하는 문제로 거의 하루를 날려먹었는데

고맙다 감동이야
vsCode extension Developer Affirmation입니다.

function App() {
  const [value, setValue] = useState('');
  const onChange = (event: React.FormEvent<HTMLInputElement>) => {
    console.log(event.currentTarget.value);
    //이렇게 currentTarget의 값을 value라고 명시할 수 있다.
    const {
      currentTarget: { value },
    } = event;
    setValue(value);
  };
  
  //React. 이벤트 이름 <element 이름> 으로 특정짓는다.
  const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    console.log('hello', value);
  };
  return (
    <div>
      <form onSubmit={onSubmit}>
        <input
          value={value}
          type="text"
          placeholder="username"
          onChange={onChange}
        />
        <button>Log in</button>
      </form>
    </div>
  );
}

https://ko.reactjs.org/docs/events.html
React JS 공식문서에서 SyntheticEvent를 검색하면 여러가지 이벤트와 이벤트에 해당하는 method를 찾을 수 있다.

예를 들면 Form 이벤트는 onChange, onInput ... 를 사용할 수 있음

🎈팁

자바스크립트에서 타입스크립트로 변환할때는 타입스크립트 용 패키지를 설치받아야하는데 보통

npm install --save typescript @types/node @types/react @types/react-dom @types/jest
 @types/styled-components

와 같은 식으로 묶어서 설치하면 된다.

참조 자료 :
https://create-react-app.dev/docs/adding-typescript/