함수 컴포넌트는 입력을 JSX로 바꾸는 렌더 단위다

렌더 계산, 사용자 이벤트, 외부 동기화를 한 함수 안에서도 서로 다른 책임으로 분리한다.

입력

props · state

현재 렌더의 snapshot을 읽는다

계산

순수한 render

조건·목록을 JSX로 계산한다

출력

React tree

React가 이전 결과와 비교한다

반영

DOM commit

필요한 변경만 브라우저에 적용한다

핵심이벤트 핸들러는 다음 state를 요청하고, effect는 commit 뒤 외부 시스템을 맞춘다.