트러블슈팅 - Footer에 form 상태 내려주는 방식 고민
Next.js + React Hook Form 기반으로 콘텐츠 생성/수정 페이지를 구현하면서, footer 버튼에서 form의 현재 상태를 필요로 하는 요구가 생겼다.초기 접근처음에는 useForm() 내부에서 watch()를 사용해 전체 form 데이터를 실시간으로 추적하고, 해당 값을 ContentFooter 컴포넌트에 prop으로 전달하는 방식으로 구현했다. 문제 발생하지만 watch()는 form의 모든 필드가 변경될 때마다 리렌더링을 유발한다. 특히 이미지나 파일 업로드 등 상태가 큰 컴포넌트가 포함된 경우 watch()의 호출 비용이 커져 성능 저하로 이어졌다.실시간 렌더링이 잦아지고버튼과 무관한 필드 변경에도 전체 리렌더가 발생함원인 분석watch()는 전체 상태를 추적하기 때문에, 모든 입..
프론트엔드/트러블슈팅
2025. 4. 3. 16:21