STUDY/[ React ]

React, ReactDOM, Virtual DOM, State 관계 정리

Lim임 2026. 1. 7. 17:21

1. 시작 질문 — 왜 이게 가볍다는 거지?

처음 의문은 이것이었다.

React는 Virtual DOM을 써서 가볍다는데,
정확히 뭐가 다르길래 더 가벼운 거지?

이 질문의 핵심은 사실 React / ReactDOM / Virtual DOM / state의 관계가 분리되어 있지 않다는 데 있었다.

2. 잘못 이해하기 쉬운 지점

많이 하는 오해 중 하나는 이거다.

Virtual DOM이 useState로 값을 관리하게 해주는 거 아니야?

혹은

useState로 관리한 값을 다시 input value에 넣어주는 역할이 Virtual DOM 아니야?

이 생각은 절반만 맞고 절반은 틀렸다.

3. 개념부터 정확히 분리하기

3.1 React

  • 상태(state)를 기반으로 UI를 선언적으로 작성하는 라이브러리
  • 핵심 철학:

UI는 상태의 결과다

React는 DOM을 직접 조작하지 않는다.

3.2 State (useState)

  • React 내부에서 값을 저장하는 메커니즘
  • 값이 바뀌면 컴포넌트를 다시 실행시킨다
const [value, setValue] = useState("");

중요한 점:

  • state는 DOM에 있는 값이 아니라 React 메모리 안의 값이다

3.3 Virtual DOM

  • React가 렌더링 결과를 객체 트리 형태로 표현한 것
  • 실제 DOM이 아니다
  • 비교(diff)를 위한 설계도에 가깝다

state가 바뀌면:

  1. 컴포넌트 재실행
  2. 새로운 JSX 생성
  3. 새로운 Virtual DOM 생성
  4. 이전 Virtual DOM과 비교

3.4 ReactDOM

  • React와 브라우저 DOM을 연결하는 역할
  • Virtual DOM 비교 결과를 바탕으로
  • 필요한 부분만 실제 DOM에 반영한다

ReactDOM이 없으면 React는 브라우저에 아무것도 그릴 수 없다.

4. 전체 흐름 한 번에 보기

state 변경 (setState)
→ 컴포넌트 재실행
→ JSX 반환
→ 새로운 Virtual DOM 생성
→ 이전 Virtual DOM과 비교
→ ReactDOM이 실제 DOM 최소 변경

이 흐름이 React 렌더링의 전부다.

5. 그럼 왜 그냥 쓰면 안 되지?

<input value="abc" />

이건 정적인 HTML이다.

  • value는 항상 "abc"
  • 사용자가 타이핑해도
  • 다음 렌더에서 다시 "abc"로 덮어씌워진다

그래서 React에서는 이렇게 쓴다.

<input value={state} onChange={e => setState(e.target.value)} />

이게 의미하는 건 단순하다.

input의 값은 DOM이 아니라 state가 진짜다

6. React가 DOM을 직접 안 믿는 이유

DOM 중심 접근의 문제점:

  • 값 변경 시점을 추적하기 어렵다
  • 여러 입력값을 조합한 로직이 복잡해진다
  • UI 상태와 비즈니스 로직이 섞인다

그래서 React는 이렇게 결정했다.

DOM을 신뢰하지 말고
state를 신뢰하자

7. Controlled Component의 진짜 의미

<input value={state} onChange={...} />

의미:

  • UI는 항상 state를 반영한다
  • UI 상태를 예측할 수 있다
  • 디버깅과 로직 분리가 쉬워진다

이게 React의 기본 철학이다.

8. 그럼 useForm / React Hook Form은 왜 쓰나?

중요한 포인트:

  • useForm은 React의 기본 설계가 아니다
  • 일부러 다른 선택을 한 라이브러리다

React 기본 방식

  • state = 진실
  • DOM = 결과
  • 항상 state → UI

React Hook Form 방식

  • DOM = 진실
  • React는 관찰자
  • submit 시점에만 값 필요

폼은 실시간 UI보다 값 수집과 검증이 중요한 경우가 많기 때문에
DOM 중심 방식이 더 효율적일 수 있다.

9. 최종 한 줄 정리

React가 state와 Virtual DOM을 사용하는 이유는

값을 항상 추적 가능하고 예측 가능한 UI를 만들기 위해서다.

useForm을 쓰기 위해서가 아니다.

10. 이해 체크용 문장

이 문장이 자연스럽게 이해되면 제대로 이해한 것이다.

React에서 input의 값은 DOM에 있는 게 아니라 state에 있고,
Virtual DOM은 그 상태를 기반으로 한 UI 설계도이며,
ReactDOM은 그 차이를 실제 DOM에 반영하는 다리 역할이다.

끝.