2. 리액트 컴포넌트 타입스크립트로 작성하기 · GitBook

[utterances-bot]

2. 리액트 컴포넌트 타입스크립트로 작성하기 · GitBook

https://react.vlpt.us/using-typescript/02-ts-react-basic.html

[jung-hunsoo]

FYI, typescript를 지원하는 create-react-app의 옵션은 다음과 같이 변경되었습니다. $ npx create-react-app ts-react-tutorial --template typescript

[i0boy]

React.FC 쓰지 말라는 팁 댓글... 추천 1위가 이 글 대로 할꺼면 Typscrpit 쓰지 말라는 내용이네요 ㅋㅋ

[ww8007]

제가 onClick에 대한 마우스를 올렸을 때 event에 대해 attribute가 되는 것이 아닌 MouseEventHandler 만 출력이 되어서 질문 드립니다. 이 경우에 대해서는 어떻게 해결을 해야 하나요?? 임시방편으로 MouseEvent로 사용을 하니 잘 되긴 하는데 아무리 검색하여도 모르겠어서 질문드립니다...

{React.MouseEventHandler<HTMLButtonElement> | undefined}

[xpmxf4]

https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/forms_and_events/

여기에서 보시면 이벤트 인자의 타입을 지정하는 것이 아닌 함수가 어떤 형식의 함수인지를 선언해버리는 방법으로 나오기도 합니다. 저도 ww8807님 처럼만 정보가 보여서 아래와 같이 했습니다!

const onChange: React.ChangeEventHandler<HTMLInputElement> = (
    e
  ) => {
    const { name, value } = e.target;
    setForm({
      ...form,
      [name]: value,
    });
  };

물론 그냥 다음과 같이 해도 되지만,

const onChange = (
    e: React.ChangeEvent<HTMLInputElement>
  ) => {
    const { name, value } = e.target;
    setForm({
      ...form,
      [name]: value,
    });
  };

저도 어째선지 이벤트 인자에 대한 정보는 안 나오네요ㅠㅠ

[godtaehee]

@jung-hunsoo 감사합니다

[eunipapa]

댓글을 참조해서 본문 수정이 시급합니다