🚀 회원가입 렌더링 최적화

1. 문제 상황 발생

React Developer Tools를 이용해 회원가입 페이지의 렌더링을 확인한 결과, 하나의 입력 필드에 텍스트를 입력할 때마다 페이지 내 여러 컴포넌트가 불필요하게 함께 렌더링되는 현상이 발생했습니다.

2. 원인 분석

ID 필드를 기준으로 렌더링 흐름을 확인해보았습니다.

SignUpForm.tsx

SignUpForm 컴포넌트는 전체 form 데이터를 하나의 formData state로 관리하고 있으며, 각 입력 필드 컴포넌트 (IdInput 등)에는 해당 필드의 값과 setter 함수가 props로 전달됩니다.

IdInput.tsx

handleChange 함수는 input의 onChange 시 호출되어 formData.id 값을 갱신합니다.

이러한 구조로 인해 formData의 값이 변경될 때마다 SignUpForm 컴포넌트 전체가 리렌더링되며, 그에 따라 렌더링이 과도하게 발생하는 문제가 나타납니다.

3. 문제 해결

매번 텍스트가 입력될 때마다 SignUpForm 전체를 업데이트하는 방식이 아닌, 특정 이벤트 발생 시점에만 formData 값을 업데이트하는 방식으로 변경해야 합니다.

Input 태그와 버튼이 같이 있는 경우

IdInput 컴포넌트 내부에서 텍스트 입력 값을 관리하는 별도의 useState를 만들고, 버튼을 클릭하는 시점에만 formData를 업데이트하도록 구현하면 불필요한 리렌더링을 줄일 수 있습니다.

IdInput.tsx

Input 태그만 있는 경우

예를 들어, 비밀번호 입력 컴포넌트처럼 input만으로 구성된 경우에는 onBlur 이벤트를 활용할 수 있습니다.

사용자가 입력 필드에서 포커스를 벗어났을 때(onBlur), 해당 시점에만 formData를 업데이트하여 렌더링을 최소화합니다.

PasswordInput.tsx

즉, onChange 이벤트로 formData를 즉시 업데이트하지 않고, onClick이나 onBlur와 같은 특정 시점에서만 formData를 업데이트함으로써 전체적인 렌더링 횟수를 줄일 수 있습니다.

4. 결과

이전에는 한 필드의 값이 변경될 때마다 모든 필드와 관련된 상위 컴포넌트가 재렌더링되었지만, 개선된 방식에서는 해당 필드의 컴포넌트만 업데이트되는 것을 확인할 수 있습니다.

이를 통해 성능을 최적화했으며, 불필요한 렌더링이 줄어들어 사용자 경험(UX)도 향상되었습니다.