카카오테크캠퍼스 2기 | STEP2 | 8일차(24-07-03) 회고

 

⭕ 카카오테크캠퍼스 2기 | STEP2 | 8일차(24-07-03) 회고

📝 Outlet

• React Router를 처음 접하고 사용하면서 고민을 하게 되었다. 라우팅 구조를 어떻게 더 효율적이고 관리하기 쉽게 만들 수 있을까 하는 것이었다. 특히, 여러 경로에서 공통으로 사용되는 레이아웃을 어떻게 처리할지에 대한 고민이 많았다.

---

 

초기 구현

• 처음에는 각 경로에 대해 개별적으로 컴포넌트를 렌더링하는 방식으로 설정하였다.
• 각 경로마다 일일이 컴포넌트를 정의해주어야 한다.

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

import Footer from '@/components/Footer';
import Header from '@/components/Header';
import { AuthProvider } from '@/context/AuthProvider';
import LoginPage from '@/pages/LoginPage';
import MainPage from '@/pages/MainPage';
import MyAccountPage from '@/pages/MyAccountPage';
import ThemePage from '@/pages/ThemePage';

function App() {
  return (
    <AuthProvider>
      <Router>
        <Header />
        <main>
          <Routes>
            <Route path="/" element={<MainPage />} />
            <Route path="theme/:themeKey" element={<ThemePage />} />
            <Route path="login" element={<LoginPage />} />
            <Route path="my-account" element={<MyAccountPage />} />
          </Routes>
        </main>
        <Footer />
      </Router>
    </AuthProvider>
  );
}

export default App;

---

변경된 구현

• Outlet을 통해 부모 라우트 내에서 자식 라우트를 쉽게 렌더링 할 수 있다는 것을 알게 되었다.

import { Outlet, BrowserRouter as Router, Route, Routes } from 'react-router-dom';

import Footer from '@/components/Footer';
import Header from '@/components/Header';
import { AuthProvider } from '@/context/AuthProvider';
import LoginPage from '@/pages/LoginPage';
import MainPage from '@/pages/MainPage';
import MyAccountPage from '@/pages/MyAccountPage';
import ThemePage from '@/pages/ThemePage';

function Layout() {
  return (
    <>
      <Header />
      <main>
        <Outlet />
      </main>
      <Footer />
    </>
  );
}

function App() {
  return (
    <AuthProvider>
      <Router>
        <Routes>
          <Route path="/" element={<Layout />}>
            <Route index element={<MainPage />} />
            <Route path="theme/:themeKey" element={<ThemePage />} />
            <Route path="login" element={<LoginPage />} />
            <Route path="my-account" element={<MyAccountPage />} />
          </Route>
        </Routes>
      </Router>
    </AuthProvider>
  );
}

export default App;

 

📝 Daily Scrum 이후

😋 Today 회고

• 내일 Step 2를 실행할 수 있도록 준비를 해야 할 것 같다.
• VSCode 설정에서 나의 Prettier 설정과 클론한 설정이 충돌했다. 이 문제를 해결하려고 VSCode를 새로 설치하는 데 꽤 많은 시간이 걸렸다. 특히, 내가 자주 사용하던 테마의 이름을 잊어버려서, 이를 찾기 위해 VSCode 테마 관련 블로그 글을 모두 찾아야 했다. 🕵️‍♂️ 이 과정에서 기록의 중요성을 다시 한번 깨달았다. JellyFish Theme였다… 🎨 눈에 띄는 테마인데 나만 쓰는 테마인 것 같아서 찾는 데 오래 걸렸다.

 

➡️ 참고 링크

https://citylock77.tistory.com/142

Visual Studio Code(VS code) 초기화 및 재설치

https://rinn-story.tistory.com/30

[React] 중첩 라우팅, Outlet 사용법