React 상태가 화면에 반영되는 흐름

상태는 컴포넌트가 소유하고 이벤트가 setter를 호출하면 React가 다시 렌더링해 새 값을 자식에게 전달합니다.

입력

사용자 이벤트

클릭, 입력, 응답처럼 화면을 바꿔야 하는 사건이 발생합니다.

갱신

setState

setter에 다음 값을 전달해 상태 변경을 예약하며 기존 값을 직접 바꾸지 않습니다.

계산

Re-render

React가 새 state를 읽어 컴포넌트 함수와 UI 트리를 다시 계산합니다.

전달

props

부모가 계산한 값과 콜백을 자식 컴포넌트에 한 방향으로 내려보냅니다.

출력

화면 갱신

이전 결과와 달라진 DOM만 반영되고 다음 이벤트를 기다립니다.

핵심state는 값을 소유하는 위치이고 props는 그 값을 전달하는 통로이므로 같은 데이터를 여러 곳에 중복 저장하지 않습니다.