문제 상황

P 프로젝트 내부 QA 기간 중 작가 등록 페이지에서 필드에 값 넣고 지우고 사진 등록하고 난리 부르스를 하니 버벅이는 현상 포착
performance 측정해보니 INP가 빨간불이 떠있음

INP(Interaction to Next Paint)는 사용자가 UI와 상호작용했을 때, 브라우저가 그 결과를 화면에 렌더링하기까지 걸리는 시간을 측정하는 사용자 경험 지표

문제 원인

사진 파일을 올리고 닉네임과 작가 소개를 변경하니 해당 버벅이는 것을 확인.
코드에서 useWatch 훅을 사용하여 modal 컴포넌트로 닉네임, 사진 등의 데이터를 prop으로 전달하고 있음. form 컴포넌트 내부의 필드 컴포넌트들에서 form의 각 필드 값을 업데이트 하면 값을 추적하고 있던 hook에 의해 modal에 전달하던 상태 또한 업데이트 되어 리렌더링이 발생한 것.

문제 해결

리팩토링 전략은 다음과 같음

데이터 전달 방식의 개선

• 상태 기반 전달 대신 컨텍스트 활용 : useWatch로 상위 컴포넌트에서 데이터를 추적하지 않고, form 객체를 그대로 자식 컴포넌트로 전달(직접 데이터를 읽도록 함)
• 불필요한 prop 제거 : 필드 값이 필요 없어진 modal 컴포넌트에는 form과 모달 상태(열고 닫음을 관장하는 상태)만 전달하여 리렌더링을 최소화

개선 결과

1.리렌더링 감소

2.INP 수치 개선

이전에는 고용량 사진 업로드 후 필드 입력 시 400ms 이상의 INP 수치를 기록함
리팩토링 후, 평균 INP 수치가 130ms 이하로 감소하여 사용자 경험이 크게 향상되었다!