useOutletContext

프로젝트 진행중 헤더 재사용 관해서 페이지마다 사용되는 헤더가 다르고 페이지명이 달라 예전에 처리했던 코드로 하려다 GPT에게 더 효율적이게 관리할 수 있냐고 물어봤다 useOutletContext를 쓰면 부모에게 데이터를 전달이 가능해 효율적으로 관리 가능하다고 하였다.

현재 해더재사용 하는 중 페이지 마다 사용되는 헤더가 다름 페이지가 많지않아

// Header.tsx 내부
const isChatbot = location.pathname !== '/chatbot' ? showSearch : !showSearch;
const isPage = location.pathname === '/' ? showBackButton : !showBackButton;

const title = location.pathname === '/pricing' ? '요금제' :
location.pathname === '/mypage' ? '마이페이지' :
location.pathname === '/chatbot' ? '챗봇' :
'기본제목';

이런식으로 처리 가능하지만 좀 길어지고 페이지가 많아진다면 불편…

그래서 useOutletContext를 사용하면 현재

 <>
      <Header showBackButton={false} showSearch={false} />
      <div className="w-[90%] mx-auto">
        <Outlet />
      </div>
      <Footer />
      <ChatbotButton />
    </>

Outlet(자식)에서 전달해주는 것을 부모(Default)에게 줄 수 있음

// PricingPage.tsx
import { useEffect } from 'react';
import { useOutletContext } from 'react-router-dom';

const PricingPage = () => {
  const setHeaderConfig = useOutletContext<(config: HeaderProps) => void>();

  useEffect(() => {
    setHeaderConfig({
      title: '요금제 찾기',
      showBackButton: true,
      showSearch: false,
    });
  }, []);

  return <div>요금제 내용...</div>;
};

export default PricingPage;

이런식으로 주게 되면

부모 요소인 Default에서 받아온 데이터를 사용 가능해 Header에 전달이 가능하다.

// Default.tsx
import { useState } from 'react';
import { Outlet } from 'react-router-dom';
import Header from './components/Header';
import Footer from './components/Footer';
import ChatbotButton from './components/ChatbotButton';

const Default = () => {
  const [headerConfig, setHeaderConfig] = useState({
    title: '기본제목',
    showBackButton: false,
    showSearch: false,
  });

  return (
    <>
      <Header
        title={headerConfig.title}
        showBackButton={headerConfig.showBackButton}
        showSearch={headerConfig.showSearch}
      />
      <div className="w-[90%] mx-auto">
        <Outlet context={setHeaderConfig} />
      </div>
      <Footer />
      <ChatbotButton />
    </>
  );
};

export default Default;

마지막으로 Default.tsx 수정해야한다.

import Header from './components/Header';
import { Outlet } from 'react-router-dom';
import Footer from './components/Footer';
import ChatbotButton from './components/ChatbotButton.tsx';
import { useState } from 'react';

const Default = () => {
  const [headerConfig, setHeaderConfig] = useState({
    title: '요금제',
    showBackButton: false,
    showSearch: false,
  });

  return (
    <>
      <Header
        title={headerConfig.title}
        showBackButton={headerConfig.showBackButton}
        showSearch={headerConfig.showSearch}
      />
      <div className="w-[90%] mx-auto">
        <Outlet context={setHeaderConfig} />
      </div>
      <Footer />
      <ChatbotButton />
    </>
  );
};

export default Default;