Input 사용법 (feat. TypeScript)

const [inputSubject, setInputSubject] = useState("");

const onChange = (e: React.FormEvent<HTMLInputElement>) => {
  const {
      currentTarget: { value },
    } = e;
    setInputSubject(value);
};

const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault();
  setInputSubject("");
};

...

  <InputWrap onSubmit={handleSubmit}>
    <SubjectInput
      type="text"
      placeholder="제목을 입력하세요"
      value={inputSubject}
      onChange={onChange}
      />
    <SubjectAddBtn type="submit">추가</SubjectAddBtn>
  </InputWrap>

타입스크립트 없는 리액트 문법과는 다르다.

• React.FormEven<HTMLInputElement>
• currentTarget: { value } * value에 다른거 넣으면 바보!
• setInputSubject(value); * 여기도 value에 다른거 넣으면 바보인증...(ㅠㅠ)

• 익숙해지면 편할 것 같은데 당분간 많이 헤맬 것 같다. 아주 많이...