[React] form 태그를 사용해서 value 가져오기 feat. TypeScript

React에서 Form 태그를 사용하는 경우가 있다. 

일반적으로 input, textarea 등 value를 통해 무언가 작업을 한다. 

 

이때, useState를 사용하면 값이 변경될 때 마다 컴포넌트가 리렌더링이 발생하게 된다. 

실제 값이 변경됨을 감지해서 무언가 작업을 해야한다면 사용할 수 있지만 그게 아니라면

굳이 필요없는 리렌더링이 발생하게 된다. 

 

이것을 useRef도 아닌 Form 태그 자체 기능을 사용해서 해결할 수 있다. 

const Component = () => {
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const target = event.target as HTMLFormElement;
    
    const title = target.titleValue as HTMLInputElement;
    const content = target.contentValue as HTMLInputElement;
    const checkbox = target.checkboxValue as HTMLInputElement;
  
    console.log(title.value)       // title 의 값
    console.log(content.value) // content의 값
    console.log(checkbox.checked)  // check 여부
  }
  
  return (
    <form onSubmit={handleSubmit}>
      <input id="titleValue" />
      <textarea id="contentValue" />
      
      <input type="checkbox" id="checkboxValue" />
      
      <button type="submit">버튼</button>
    </form>
  )
}

Form 태그의 event에는 자식 Element를 가지고 있다. 

그래서 해당 Element를 가져와서 사용하면 값을 얻을 수 있다. 

 

또한 이렇게 사용하면 장점이 하나 더 있는데, target.reset() 함수를 사용하면 form 태그의 모든 

값이 초기화가 된다. 굳이 불필요한 초기화 작업이 없어진다는 장점이 있다.