React Outlet의 필요 이유??!

적용 이유

핵심 문제

• 프로젝트 중 사이드바와 네브바를 만들면서 생겨난 문제이다.

• 사이드바와 상단 네브바는 달력, 태그, 포커스타이머, 시간표, 설정에서 공통으로 사용한다.

• 기존의 방식의 따른 문제

  • 컴포넌트로 제작하게 되면 새로고침 시 디폴트 페이지로 이동하게 되는 문제가 발생
  • 라우터로 제작하게 되면 동일한 디자인을 각각의 페이지에 넣어야 한다.(비 효율적)

React Outlet이란?

• 중첩된 라우트를 렌더링하는 데 사용한다.
• 부모 라우트가 자식 라우트를 포함하고 있을 때, 부모 라우트의 레이아웃이나 공통 UI 요소를 렌더링하면서, 자식 라우트의 컴포넌트를 특정 위치에 렌더링하는 역할을 한다.

중첩 라우팅이란?

• 부모 컴포넌트 안에 자식 컴포넌트 라우트를 렌더링하는 것을 의미한다.
• 공통 UI (예: 메뉴, 사이드바 등)을 부모에서 처리하고, 자식 경로에 따라 바뀌는 내용만 바꿀 수 있음

핵심 내용

• 경로를 바꾸면서 공통 UI는 유지하고 자식 경로에 따라 바뀌는 내용만을 바꿀 수 있다.

Outlet에 대한 간단한 설명

• <Outlet />은 부모 라우트 컴포넌트 안에서 자식 라우트 컴포넌트를 렌더링해주는 자리 표시자이다.

간단한 사용법

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

function Users() {
  return (
    <div>
      <h2>사용자 목록</h2>
      {/* 자식 라우트가 여기에 렌더링됨 */}
      <Outlet />
    </div>
  );
}

• 공통으로 사용할 ui가 Users이다.
• Outlet 바뀌는 자식 라우터들이 오는 자리

import { Routes, Route } from 'react-router-dom';
import Users from './Users';
import UserDetail from './UserDetail';
import UserDetail2 from './UserDetail2';

function App() {
  return (
    <Routes>
      <Route path="users" element={<Users />}>
        <Route path=":id" element={<UserDetail />} />
        <Route path="detail" element={<UserDetail2 />} />
      </Route>
    </Routes>
  );
}

• 라우터에서의 코드