버튼 클릭, 입력 변경처럼 UI에서 신호가 발생합니다.
STATE · PROPS · RENDER
클릭 한 번은 상태 변경과 화면 갱신을 거친다
React에서는 이벤트가 상태를 바꾸고, 새 상태가 JSX 결과를 다시 계산한 뒤 필요한 DOM만 반영됩니다.
onClick 같은 함수에서 다음 상태를 계산합니다.
setState 계열 함수로 React에 변경을 맡깁니다.
컴포넌트 함수가 다시 실행되어 새 화면 설명을 만듭니다.
이전 결과와 비교해 달라진 부분만 브라우저에 반영합니다.
state컴포넌트가 직접 관리하며 시간이 지나면 바뀌는 값입니다.
props부모가 내려주는 읽기 전용 입력값입니다.
event사용자 행동을 상태 변경으로 연결하는 시작점입니다.
render현재 데이터로 어떤 UI를 보여줄지 다시 계산하는 단계입니다.
화면이 예상과 다르면 이벤트가 실행됐는지, 상태가 새 값인지, 자식에게 props가 제대로 내려갔는지 순서대로 확인합니다.