🚀 useRef을 이용한 회원가입 렌더링 최적화
🚨 문제 상황
이전 회원가입 렌더링 최적화 링크 : [SoundLink] 회원가입 렌더링 최적화
이전에 onChange 이벤트로 formData를 즉시 업데이트하지 않고, onClick이나 onBlur와 같은 특정 시점에서만 formData를 업데이트함으로써 전체적인 렌더링 횟수를 줄이게 최적화하였다.
이렇게 특정 상황에서만 formData를 변경하는 이유는 formData가 useState로 관리되고 있기 때문이다. useState 값이 변경되면 컴포넌트가 다시 렌더링되지만, formData는 최종적으로 submit할 때만 필요한 데이터다. 따라서 불필요한 렌더링을 방지하기 위해 useRef를 활용하여 formData를 리팩토링하려고 한다.
🛠️ 문제 해결
signUpForm.tsx
formData를 useRef로 변경하였다.
하지만 useRef는 직접 변경하더라도 리렌더링을 트리거하지 않으며, 하위 컴포넌트에서 직접 수정할 수 없다. 따라서 changeFormID와 같은 함수 형태의 props를 함께 전달해야 하위 컴포넌트에서 useRef 값을 변경할 수 있다.
IdInput.tsx
기존에는 onClick이나 onBlur와 같은 특정 이벤트에서만 상태를 업데이트했지만, 이제는 onChange만으로도 코드를 효율적으로 관리할 수 있으며, 불필요한 리렌더링도 방지할 수 있다.
✅ 결과
onClick이나 onBlur와 같은 추가적인 로직 없이도 useRef를 사용해 불필요한 렌더링을 효과적으로 방지할 수 있었다. 또한, onChange 이벤트만으로 입력 값을 관리하면서 코드가 더욱 간결해졌다. 최종적으로 submit 시점에만 필요한 데이터가 반영되도록 설계하여 성능을 최적화할 수 있었다.
출처 :
