Web Basic · React Intro

React 컴포넌트를 입력과 출력의 함수로 읽기

React 기초에서 중요한 것은 JSX 문법 목록보다, props와 state가 현재 화면을 만들고 이벤트가 다음 상태를 요청한다는 흐름이다.

01

분해

화면을 책임과 변경 이유가 같은 컴포넌트로 나눈다.

02

입력

부모에서 들어오는 데이터와 콜백을 props로 받는다.

03

렌더

현재 props와 state를 기준으로 JSX를 반환한다.

04

갱신

이벤트 핸들러가 setter나 부모 콜백을 호출해 새 렌더를 만든다.

Props
읽기 전용 입력 자식은 값을 표시하고 변경은 요청만 함
직접 수정 금지
State
내부 기억 입력값, 선택, 열림 상태처럼 변하는 값
필요한 가장 가까운 곳에
JSX
UI 설명 조건과 반복을 JavaScript 표현식으로 섞음
복잡하면 분리
Key
목록 정체성 항목 추가·삭제·정렬 시 안정 식별자
index key 한계

단방향 · 상태 위치 · 컴포넌트 점검

단방향 데이터는 내려가고 변경 요청은 올라간다.
상태 위치 공유 범위에 맞게 상태를 배치한다.
컴포넌트 한 컴포넌트가 여러 책임을 떠안지 않는다.
목록 key가 안정적인 id를 사용한다.