UI STRUCTURE

React는 데이터 변화와 화면 갱신을 같은 구조 안에서 다루기 위해 등장했다

동적인 웹이 커질수록 DOM을 직접 찾아 바꾸는 방식은 상태 추적을 어렵게 만듭니다. React는 상태를 기준으로 UI를 다시 계산하는 모델을 제안합니다.

직접 DOM 조작

이벤트마다 바꿀 요소를 직접 찾는다.
데이터와 화면의 현재 상태를 따로 맞춘다.
화면이 커질수록 갱신 순서가 복잡해진다.

React 방식

상태가 바뀌면 UI를 다시 계산한다.
컴포넌트 단위로 화면 책임을 나눈다.
같은 입력은 같은 화면이라는 기준을 만든다.
Component

재사용 가능한 화면 조각으로 복잡도를 나눕니다.

State

변하는 값을 명시하고 화면 갱신의 출발점으로 둡니다.

Render

상태와 속성을 기반으로 현재 보여줄 UI를 계산합니다.

학습 기준React를 문법 묶음으로 외우기보다, 상태 변화가 화면으로 전달되는 흐름을 먼저 이해합니다.