React가 해결하는 UI 동기화 문제

화면 분해

반복되는 UI와 독립 책임을 기준으로 컴포넌트를 나눈다.

외부 입력은 props로, 사용 중 변하는 값은 state로 둔다.

컴포넌트는 현재 값으로 JSX를 반환하고 React가 DOM 반영을 조정한다.

이벤트 핸들러가 state 변경을 요청하면 같은 규칙으로 UI가 다시 계산된다.

Component

UI 단위 표시 구조와 필요한 이벤트를 함께 캡슐화

너무 큰 화면 컴포넌트는 분리

Declarative

결과 중심 표현 DOM 조작 절차보다 현재 상태의 화면을 기술

명령형 코드는 ref 경계로 제한

One-way data

단방향 흐름 부모가 값을 내려주고 자식은 이벤트로 요청

추적성이 높아짐

Virtual tree

변경 비교 새 렌더 결과와 이전 결과를 비교해 필요한 반영을 결정

무조건 빠름을 의미하지 않음

컴포넌트 기준 재사용보다 책임과 변경 이유가 먼저 보인다.

데이터 방향 값이 어디서 내려오고 어디서 바뀌는지 설명 가능하다.

DOM 조작 직접 querySelector로 화면을 맞추는 코드가 핵심 흐름에 없다.

렌더 비용 장점 설명이 성능 만능론으로 흐르지 않는다.