학습 흐름

React 렌더링과 상태 흐름

부모 컴포넌트가 state를 소유하고 props로 값을 내려보내면, 자식은 전달받은 값을 JSX에 반영합니다. 이벤트는 다시 부모의 업데이트 함수로 연결됩니다.

App 컴포넌트

source of truth

state: count, products 화면을 바꾸는 원천 값은 공통 부모가 관리합니다.

props down Counter count와 onClick을 받아 버튼 UI를 그립니다.

props down ItemList products 배열을 받아 목록으로 렌더링합니다.

event up Button 클릭 이벤트가 setCount 호출로 연결됩니다.

1 Component 함수 하나가 UI 한 조각을 반환하는지 확인합니다.

2 JSX 중괄호로 값과 조건을 화면 안에 연결합니다.

3 State 사용자 행동 뒤 새 렌더링을 만드는 값을 찾습니다.

4 Props 부모에서 자식으로 내려가는 읽기 전용 입력을 봅니다.