Question 1

Virtual DOM이란 무엇이며 왜 사용하나요?

Accepted Answer

Virtual DOM은 UI의 상태를 JavaScript 객체 형태의 트리로 표현한 것입니다. 자바스크립트 **객체 형태의 트리로 표현**한 것입니다. 
React에서는 **상태나 props가 변경**되면 실제 DOM을 바로 수정하는 것이 아니라, 먼저 변경된 상태를 기준으로 **새로운 Virtual DOM을 생성**합니다.

그다음 이전 Virtual DOM과 새로 만들어진 Virtual DOM을 비교하는 **Diffing 과정을 수행**합니다. 이 과정에서 요소의 타입이 같은지 확인하고, 같은 요소라면 속성이나 자식 요소 중 어떤 부분이 변경되었는지를 비교합니다. 리스트의 경우에는 key를 기준으로 기존 요소와 새 요소의 관계를 판단합니다.

이렇게 비교한 결과를 바탕으로 React는 실제로 어떤 부분을 변경해야 하는지 결정하는 **Reconciliation 과정을 거칩니다.** 이후 **Commit 단계에서 계산된 변경사항만 실제 DOM에 반영**합니다.

실제 DOM이 변경된

Question 2

Controlled Component와 Uncontrolled Component의 차이점은?

Accepted Answer

폼 입력의 값을 **누가 관리하느냐**의 차이입니다.

### **Controlled Component**

**React state가 입력값의 유일한 출처(single source of truth)**입니다. 입력할 때마다 onChange로 state를 갱신하고, input은 그 state를 value로 받아 그립니다.

- 모든 입력 변화를 React가 알고 있으므로 **실시간 유효성 검사, 입력값 변형(포맷팅), 조건부 제출** 같은 세밀한 제어가 가능합니다.
- 대신 **입력마다 리렌더링**이 발생합니다.

### **Uncontrolled Component**

**DOM 자체가 값을 관리**하고, React는 필요한 시점에만 ref로 값을 읽습니다. 초기값은 `defaultValue`로 지정합니다.

- 입력 중에 리렌더링이 없어 가볍습니다.
- 제출 시점에만 값이 필요한 **간단한 폼**이나, 값 자체를 React가 가질 수 없는 **파일 입력**(`input type=

React

01Virtual DOM이란 무엇이며 왜 사용하나요?쉬움핵심 개념

02Controlled Component와 Uncontrolled Component의 차이점은?쉬움핵심 개념