트러블슈팅 - Footer에 form 상태 내려주는 방식 고민

Next.js + React Hook Form 기반으로 콘텐츠 생성/수정 페이지를 구현하면서, footer 버튼에서 form의 현재 상태를 필요로 하는 요구가 생겼다.

초기 접근

처음에는 useForm() 내부에서 watch()를 사용해 전체 form 데이터를 실시간으로 추적하고, 해당 값을 ContentFooter 컴포넌트에 prop으로 전달하는 방식으로 구현했다.

 

문제 발생

하지만 watch()는 form의 모든 필드가 변경될 때마다 리렌더링을 유발한다. 특히 이미지나 파일 업로드 등 상태가 큰 컴포넌트가 포함된 경우 watch()의 호출 비용이 커져 성능 저하로 이어졌다.

• 실시간 렌더링이 잦아지고
• 버튼과 무관한 필드 변경에도 전체 리렌더가 발생함

원인 분석

• watch()는 전체 상태를 추적하기 때문에, 모든 입력 필드 변화마다 ContentFooter가 리렌더링됨
• 실제로 footer에서 사용하는 필드는 일부에 불과한데도 불필요한 리렌더링이 반복됨

해결 방법 (대안)

• 선택적 watch 사용: watch('필드명') 형태로 필요한 필드만 추적
• 최종 제출 데이터만 전달: handleSubmit() 안에서만 footer에 데이터 전달

혹은 footer에서 버튼 클릭 시점에만 form 상태를 조회하도록 구조를 바꾸는 방법도 고려했다.