React 컴포넌트·JSX·상태 연결

입력 수신

부모 컴포넌트가 props로 데이터와 콜백을 전달한다.

JSX는 현재 props와 state를 기준으로 화면 구조를 만든다.

사용자 입력이 핸들러를 호출하고 필요한 상태 변경을 요청한다.

상태가 바뀌면 컴포넌트가 다시 실행되어 새 UI가 반영된다.

Props

외부 입력 목록 데이터, 설정값, 이벤트 콜백을 받음

자식에서 직접 수정하지 않는다

State

컴포넌트 기억 입력값, 선택 여부, 열림 상태를 저장

서버 데이터와 구분

JSX

조건과 반복 표현 map, 조건부 렌더링으로 UI 분기 작성

복잡하면 하위 컴포넌트로 분리

Key

목록 식별 재정렬·삽입 시 항목 정체성을 유지

index key는 정렬 변경에 취약

데이터 방향 부모에서 자식으로 내려가고 변경 요청은 콜백으로 올라간다.

상태 위치 여러 컴포넌트가 공유하면 가까운 공통 부모에 둔다.

JSX 분량 한 컴포넌트가 여러 책임을 동시에 담지 않는다.

목록 key DB id처럼 안정적인 값을 사용한다.

function Counter() {
  const [count, setCount] = useState(0);

  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}