직접 DOM 조작과 React 렌더링 비교

동적인 웹에서는 같은 데이터가 여러 화면 조각에 걸쳐 보입니다. React는 DOM을 직접 찾아 고치는 일을 줄이고, state 변경이 어떤 렌더링 결과로 이어지는지 코드에 고정합니다.

1

직접 DOM 조작

수동 동기화

2

React 상태 기반 렌더링

선언적 흐름

3

사용자 동작

클릭, 입력, 요청

4

상태 변경

화면의 기준 갱신

5

렌더링

UI 결과 계산

핵심React 렌더링 책임 전환: 같은 상태가 여러 UI에 영향을 주거나, 화면 갱신 순서를 계속 신경 써야 한다면 React 같은 UI 라이브러리의 이점이 커집니다.