react basics

React 화면 렌더링

JSX, props, state를 따로 외우기보다 데이터가 어디서 들어와 어떤 컴포넌트가 다시 렌더링되는지 연결해서 봅니다.

렌더 흐름

01Props 02State 03Event 04Render 05Effect

컴포넌트

반복되는 UI를 이름 있는 조각으로 나누고 입력값을 props로 받습니다.

상태

사용자 입력이나 서버 응답처럼 바뀌는 값은 state로 관리합니다.

이벤트

클릭과 입력은 상태 변경 함수로 이어지고 화면은 그 결과로 갱신됩니다.

부수 효과

API 호출과 구독처럼 렌더링 밖 작업은 effect 경계를 분리합니다.