컴포넌트 렌더링 전환 배경

DOM 직접 조작

이벤트마다 필요한 DOM 노드를 찾아 직접 수정하면 화면 상태와 데이터 상태가 쉽게 어긋난다.

imperative

React는 state와 props를 입력으로 UI를 다시 계산해 변경점을 반영한다.

declarative

화면을 재사용 가능한 컴포넌트로 나누어 데이터 흐름과 UI 책임을 묶는다.

component

라우팅, 상태 관리, 빌드 도구가 붙으며 SPA 개발의 표준 패턴이 형성됐다.

ecosystem

명령형

무엇을 어떻게 바꿀지 DOM 단계로 직접 지시한다. 작은 페이지에는 단순하지만 상태가 늘면 추적이 어려워진다.

manual sync

선언형

현재 상태에서 UI가 어떻게 보여야 하는지를 컴포넌트로 표현한다. React가 변경 반영 순서를 맡아 화면 일관성을 높인다.

state -> UI

재사용

컴포넌트는 markup, style, behavior를 의미 있는 단위로 묶는다. props 계약이 명확할수록 조립이 쉬워진다.

composition

상태 흐름 데이터 변경이 DOM 조작이 아니라 state 변경으로 표현된다.

컴포넌트 경계 반복 UI가 props 기반 컴포넌트로 분리된다.

렌더 이해 렌더는 DOM을 매번 새로 만드는 뜻이 아니라 UI 설명을 다시 계산하는 것이다.

old: click -> find DOM -> mutate node
React: click -> setState -> render UI from state