컴포넌트 간 통신 방법에는 어떤 것들이 있나요?

리액트의 데이터 흐름은 기본적으로 위에서 아래로(부모 → 자식) 한 방향입니다. 상황에 따라 적절한 통신 방법을 골라 쓰는 것이 중요합니다.

1. 부모 → 자식: props

가장 기본적인 방법입니다. 부모가 자식에게 데이터를 props로 내려 줍니다.

function Parent() {
  return <Child name="단북" />;
}
function Child({ name }) {
  return <p>{name}</p>;
}

2. 자식 → 부모: 콜백과 상태 끌어올리기

자식이 부모에게 직접 데이터를 줄 수는 없으니, 부모가 콜백 함수를 props로 내려 자식이 호출하게 합니다. 두 자식이 같은 상태를 공유해야 하면 그 상태를 공통 부모로 올리는 상태 끌어올리기(lifting state up) 를 씁니다.

function Parent() {
  const [value, setValue] = useState('');
  return <Input onChange={setValue} />;
}
function Input({ onChange }) {
  return <input onChange={(e) => onChange(e.target.value)} />;
}

3. 멀리 떨어진 컴포넌트: Context API

여러 단계를 거쳐 props를 전달하는 prop drilling을 피할 때 씁니다. Provider로 값을 제공하고, 하위에서 useContext로 직접 꺼냅니다. 테마·로그인 정보처럼 전역적으로 필요한 값에 적합합니다.

const ThemeContext = createContext('light');
 
function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}
function Toolbar() {
  const theme = useContext(ThemeContext); // 중간을 건너뛰고 직접 사용
  return <div className={theme} />;
}

Context는 값이 바뀌면 이를 구독하는 하위 컴포넌트가 모두 리렌더되므로, 자주 바뀌는 값을 무분별하게 담으면 성능 문제가 생길 수 있습니다.

4. 복잡한 전역 상태: 상태 관리 라이브러리

앱이 커지면 Redux, Zustand, Jotai 같은 외부 라이브러리로 전역 상태를 관리합니다. 서버 데이터는 TanStack Query 같은 서버 상태 도구로 따로 다루는 것이 일반적입니다.