State 끌어올리기: 원칙 및 예시

환영합니다

문제: 동기화되지 않는 형제 컴포넌트

공통 조상 찾기

function Parent() {
  const [value, setValue] = useState('');
  return (
    <>
      <InputA value={value} onChange={setValue} />
      <PreviewB value={value} />
    </>
  );
}

카운터 끌어올리기 예시

function App() {
  const [count, setCount] = useState(0);
  return (
    <>
      <CounterDisplay count={count} />
      <CounterControl count={count} onIncrement={() => setCount(c => c + 1)} />
    </>
  );
}

업데이트를 위한 콜백 프롭

상태를 끌어올린 후의 제어 컴포넌트와 비제어 컴포넌트

여러 단계로 상태 끌어올리기

상태 끌어올리기의 장점

끌어올린 상태에서 파생 값 만들기

const [items, setItems] = useState([]);
const filteredItems = items.filter(i => i.done); // derived, not separate state

상태를 과도하게 끌어올리게 될 때

빠른 확인

복습

다음 학습