React useOutletContext

1. useOutletContext 

React Router에서 제공하는 훅으로, 부모 컴포넌트에서 자식 컴포넌트로 데이터를 공유하거나 기능을 전달하기 위해 사용한다. useOutletContext는 Outlet 컴포넌트의 context 속성을 통해 데이터를 전달 받는다.

React Router를 사용한 페이지 내에서, 특정 라우트 계층 구조에서 데이터를 효율적으로 공유하고자 할 때 유용하다.

 

1-1. 기본 구조와 동작

1. 부모 컴포넌트에서 context 설정

부모 컴포넌트는 Outlet에 context 속성을 사용해 데이터를 전달한다.

import { Outlet } from 'react-router-dom';

function Parent() {
  const sharedData = { user: 'John Doe', role: 'Admin' };

  return (
    <div>
      <h1>Parent Component</h1>
      <Outlet context={sharedData} />
    </div>
  );
}

 

2. 자식 컴포넌트에서 useOutletContext로 데이터 접근

자식 컴포넌트는 useOutletContext를 사용해 부모에서 전달된 데이터를 읽는다.

import { useOutletContext } from 'react-router-dom';

function Child() {
  const context = useOutletContext(); // { user: 'John Doe', role: 'Admin' }

  return (
    <div>
      <h2>Child Component</h2>
      <p>User: {context.user}</p>
      <p>Role: {context.role}</p>
    </div>
  );
}

 

2. 실제 사용 예제

1. 데이터 공유

부모 컴포넌트에서 API 호출 결과를 자식 컴포넌트와 공유한다.

import { Outlet } from 'react-router-dom';

function Parent() {
  const userData = { name: 'Alice', age: 30 };

  return (
    <div>
      <h1>Parent</h1>
      <Outlet context={userData} />
    </div>
  );
}

function Child() {
  const context = useOutletContext();

  return (
    <div>
      <h2>Child</h2>
      <p>Name: {context.name}</p>
      <p>Age: {context.age}</p>
    </div>
  );
}

 

2. 함수 전달

부모 컴포넌트에서 자식 컴포넌트로 데이터를 다시 가져오는 함수(refetch)를 전달한다.

import { Outlet } from 'react-router-dom';

function Parent() {
  const refetchData = () => {
    console.log('Fetching new data...');
  };

  return (
    <div>
      <h1>Parent</h1>
      <Outlet context={{ refetchData }} />
    </div>
  );
}

function Child() {
  const { refetchData } = useOutletContext();

  return (
    <div>
      <h2>Child</h2>
      <button onClick={refetchData}>Refetch Data</button>
    </div>
  );
}

 

3. 장점

1. 효율적인 데이터 전달

• useOutletContext를 사용하면 props Drilling 없이 계층 구조를 통해 데이터를 전달할 수 있다ㅣ.

2. 라우트별 데이터 공유

• 특정 라우터의  부모와 자식 간 데이터를 쉽게 공유할 수 있다.

3. 단일 진입점 관리

• 부모 컴포넌트에서 데이터를 관리하고, 자식에서 필요할 때마다 사용할 수 있다.

주의할 점 !

1. context 갱신과 렌더링

• 부모에서 전달된 context가 변경되면 자식 컴포넌트는 리렌더링 된다.

2. useContext와 혼동된다.

• useOutletContext는 React Router에서 제공하며, React의 useContext와는 다르다.
• useContext는 React의 Context API를 사용하지만, useOutletContext는 React Router의 Outlet과 연동된 전용 훅이다.

3. 복잡한 계층 구조

• 계층이 깊어질 경우, 데이터를 공유하는 다른 방법(예: useContext나 Redux)이 더 적합할 수 있다.

 

요약

• useOutletContext의 목적
  • 부모 컴포넌트(Outlet이 있는 컴포넌트)에서 자식 컴포넌트로 데이터를 공유하거나, 특정 기능(예: refetch)을 전달하는 데 사용.
• 장점: React Router의 라우팅 구조 내에서 간단하게 데이터 전달.
• 사용 흐름:
  1. 부모에서 Outlet의 context 속성으로 데이터를 전달.
  2. 자식에서 useOutletContext를 통해 데이터나 기능을 가져와 사용.