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 태그의 모든
값이 초기화가 된다. 굳이 불필요한 초기화 작업이 없어진다는 장점이 있다.
반응형
'React > 실험실' 카테고리의 다른 글
[React] 벨로퍼트와 함께하는 React Testing - TDD (1) | 2023.01.05 |
---|---|
[React] 성능 개선기 (0) | 2022.12.21 |
[React] React-Query - useQuery (0) | 2022.12.13 |
[React] Docker Nginx React를 사용해서 배포하기 (0) | 2022.12.12 |
[React] Nginx를 사용해서 배포하기 (0) | 2022.12.10 |