DOM에서 상태로

복잡한 화면은 바꿀 요소보다 바뀐 상태를 중심으로 다룬다

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

직접 DOM 조작

수동 동기화
  1. 이벤트가 발생할 때마다 대상 요소를 직접 찾습니다.
  2. 데이터와 화면이 어긋나지 않도록 갱신 순서를 관리합니다.
  3. 화면 조각이 늘어나면 누락된 DOM 업데이트가 버그가 됩니다.

React 상태 기반 렌더링

선언적 흐름
  1. 변하는 값을 state로 두고 화면의 기준점으로 삼습니다.
  2. 컴포넌트는 현재 state로 보여줄 UI를 다시 계산합니다.
  3. React가 필요한 변경을 실제 DOM에 반영합니다.
사용자 동작 클릭, 입력, 요청
상태 변경 화면의 기준 갱신
렌더링 UI 결과 계산
DOM 반영 필요한 부분만 업데이트

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