React 기초 핵심 경계

컴포넌트 경계 잡기

반복되는 UI 조각보다 데이터와 책임이 함께 움직이는 단위를 컴포넌트로 봅니다.

경계

JSX는 HTML 문자열이 아니라 React element를 만드는 표현식이므로 조건, 반복, 변수와 함께 다룹니다.

syntax

부모가 결정하는 값은 props, 내부 상호작용으로 바뀌는 값은 state로 두어 데이터 흐름을 단방향으로 만듭니다.

데이터 흐름

state가 바뀌면 컴포넌트가 다시 계산되므로 상태 위치가 넓으면 불필요한 렌더링이 늘어납니다.

render

Props

부모가 내려주는 계약 자식은 props를 직접 바꾸지 않고 콜백으로 변경 의도를 올립니다.

input

State

사용자 입력과 화면 상태의 소유권 여러 컴포넌트가 필요로 하면 가장 가까운 공통 부모로 올립니다.

owner

JSX

UI와 로직이 만나는 표현식 map에는 key가 필요하고, 조건부 렌더링은 값의 가능성을 명확히 해야 합니다.

view

상태 위치 state를 어디에 둘지 모호하면 그 값을 읽는 컴포넌트 목록을 먼저 적습니다.

제어 컴포넌트 input 값이 React state와 DOM 중 어디에 있는지 일관되게 둡니다.

key 목록 렌더링 key에 index를 쓰면 재정렬 시 상태가 엉킬 수 있습니다.

function Counter({ step = 1 }) {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + step)}>{count}</button>;
}