Declarative UI

React가 UI를 갱신하는 방식

React는 DOM을 직접 고치는 절차보다 상태를 바꾸면 UI가 다시 계산되는 선언적 흐름을 중심에 둡니다.

Event사용자 동작
State데이터 변경
RenderUI 재계산
CommitDOM 반영
01

선언적 방식

어떻게 바꿀지보다 현재 상태에서 무엇을 보여줄지 작성합니다.

02

컴포넌트

작은 UI 조각을 함수처럼 조합해 화면을 구성합니다.

03

상태

화면을 바꾸는 데이터를 한 방향 흐름으로 관리합니다.

04

가상 DOM

변경 전후 UI를 비교해 필요한 부분만 실제 DOM에 반영합니다.

학습 순서

  • HTML 조각을 컴포넌트로 나누는 감각을 먼저 익힙니다.
  • props와 state를 구분하면 데이터 흐름이 선명해집니다.
  • 렌더링이 언제 다시 일어나는지 관찰하면 성능 학습으로 이어집니다.

기본 단위

ComponentUI 조각
Props외부 입력
State내부 상태
Effect외부 동기화