형제 구성 요소 통신 패턴

환영합니다

형제 컴포넌트는 직접 통신할 수 없습니다

패턴: 부모의 공유 상태

function Parent() {
  const [selected, setSelected] = useState(null);
  return (
    <>
      <Picker onSelect={setSelected} />
      <Detail item={selected} />
    </>
  );
}

읽기 및 쓰기 형제 컴포넌트

function Picker({ onSelect }) {
  return <button onClick={() => onSelect('item-1')}>Pick item 1</button>;
}

function Detail({ item }) {
  return <p>Selected: {item}</p>;
}

양방향 통신

동기화된 양식 필드 예제

function VolumeControl() {
  const [vol, setVol] = useState(50);
  return (
    <>
      <input type="range" value={vol} onChange={e => setVol(+e.target.value)} />
      <input type="number" value={vol} onChange={e => setVol(+e.target.value)} />
    </>
  );
}

이벤트 버스 안티 패턴 피하기

형제 컴포넌트가 서로 멀리 떨어져 있는 경우

형제 컴포넌트를 분리된 상태로 유지하기

형제 컴포넌트 간 통신 테스트

빠른 확인

복습

다음 학습