React Form 컴포넌트 개발기

채용 서비스 **랠릿(Rallit)**은 한 페이지에 최대 700여 개의 인풋창이 존재하는 복잡한 폼 구조를 가지고 있다. 기존의 제어 컴포넌트(Controlled Component) 방식은 입력 시마다 전체 폼이 리렌더링되어 타이핑 시 UX 저하를 유발하는 문제가 있었다.

이를 해결하기 위해 두 가지 주요 접근 방식을 검토했다.

• 상태 분리(Colocation): 각 Form Control 요소마다 개별적인 state를 가져가서 필요한 컴포넌트만 독립적으로 렌더링하도록 설계한다. 다만, 상위 컴포넌트에서 하위 컴포넌트의 state를 읽어오기 어렵다는 단점이 있다.
• 비제어 컴포넌트(Uncontrolled Component): JavaScript로 DOM 요소에 직접 접근하여 값을 읽어오는 방식이다. 상태 기반의 리렌더링을 피할 수 있어 성능 면에서 유리하며, 상위 컴포넌트에서 필요한 시점에 값을 수집하기 용이하다.