React의 제어/비제어 컴포넌트와 Virtual DOM의 관계 이해하기

들어가기전...

React에서 폼을 다루는 방식은 크게 제어 컴포넌트와 비제어 컴포넌트로 나뉩니다. 여기에 forwardRef를 더해 각각의 개념과 Virtual DOM과의 관계를 자세히 알아보겠습니다.

Virtual DOM 이해하기

Virtual DOM은 실제 DOM의 가벼운 복사본으로, React의 핵심 개념 중 하나입니다. 주요 특징은 다음과 같습니다

• 메모리에 존재하는 가상의 DOM 트리
• 실제 DOM과의 차이를 비교하여 최적의 방법으로 업데이트
• Reconciliation(재조정) 과정을 통한 효율적인 렌더링
• 배치 업데이트를 통한 성능 최적화

제어 컴포넌트 (Controlled Components)

제어 컴포넌트는 React가 데이터를 완전히 제어하는 방식입니다.

동작 원리

1. 사용자가 입력을 하면 onChange 이벤트 발생
2. setState를 통해 컴포넌트의 상태 업데이트
3. 새로운 상태로 Virtual DOM 업데이트
4. Reconciliation 과정을 통해 실제 DOM 반영

Virtual DOM과의 관계

• 모든 상태 변경이 Virtual DOM을 거침
• React의 생명주기와 완벽하게 통합
• 예측 가능한 단방향 데이터 흐름
• 상태 변경마다 재조정 과정 발생

비제어 컴포넌트 (Uncontrolled Components)

비제어 컴포넌트는 DOM 자체가 데이터를 관리하는 방식입니다.

동작 원리

1. ref를 통해 DOM 노드에 직접 접근(VDOM을 거치지않음)
2. 사용자 입력이 DOM에 직접 반영
3. 필요한 시점에 ref로 값을 참조

Virtual DOM과의 관계

• Virtual DOM을 우회하여 직접 DOM 업데이트
• React의 상태 관리 체계를 벗어남
• 재조정 과정이 발생하지 않음
• DOM 업데이트가 더 빠름

forwardRef

forwardRef는 상위 컴포넌트의 ref를 하위 컴포넌트로 전달하는 메커니즘입니다.

동작 원리

1. 상위 컴포넌트에서 ref 생성
2. forwardRef를 통해 하위 컴포넌트로 전달
3. 하위 컴포넌트에서 실제 DOM 요소와 연결

Virtual DOM과의 관계

• Virtual DOM의 렌더링 사이클과 독립적으로 동작
• 직접적인 DOM 접근을 가능하게 함
• React의 단방향 데이터 흐름에서 벗어난 특별한 경우

성능과 메모리 관점의 비교

제어 컴포넌트

• Virtual DOM 트리를 위한 추가 메모리 필요
• 상태 업데이트마다 재조정 비용 발생
• 예측 가능한 데이터 흐름의 이점

비제어 컴포넌트

• Virtual DOM 오버헤드 없음
• 최소한의 메모리 사용
• 빠른 DOM 업데이트

forwardRef

• ref 객체를 위한 최소한의 메모리
• Virtual DOM을 우회한 직접 DOM 조작
• 컴포넌트 간 ref 전달을 위한 구조

각 방식의 사용 시기

제어 컴포넌트 사용

• 실시간 입력 값 검증이 필요할 때
• 조건부 렌더링이 필요할 때
• 다른 UI 요소와 입력값이 연동되어야 할 때

비제어 컴포넌트 사용

• 간단한 폼 구현 시
• 성능이 중요한 대규모 폼
• 파일 입력 같은 비통제 입력 처리 시

forwardRef 사용

• DOM 요소에 직접 접근이 필요할 때
• 라이브러리 컴포넌트 개발 시
• 부모 컴포넌트에서 자식 DOM 조작이 필요할 때