[FEAT] 페이지 라우팅 적용

[eunwoo-levi]

🚩 연관 이슈

closed # 21

📝 작업 내용

1. App 컴포넌트에서 라우팅 적용하였습니다.

function App() {
  return (
    <Routes>
      <Route path="/login" element={<LoginPage />} />
      <Route path="/" element={<TableSetup />} />
    </Routes>
  );
}

2. main.tsx 코드에서 BrowserRouter로 적용하였습니다.

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App.tsx';
import { BrowserRouter } from 'react-router-dom';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>,
);

<리뷰 반영 >

• 리팩토링 : createBrowserRouter 적용

• route.tsx 파일을 src 디렉토리에 생성

import { createBrowserRouter } from 'react-router-dom';
import TableSetup from './page/TableSetupPage/TableSetup';
import LoginPage from './page/LoginPage/LoginPage';

const router = createBrowserRouter([
  {
    path: '/',
    element: <TableSetup />,
  },
  {
    path: '/login',
    element: <LoginPage />,
  },
]);

export default router;

<main.tsx>

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <RouterProvider router={router} />
  </StrictMode>,
);

<App.tsx>

function App() {}

export default App;

🏞️ 스크린샷 (선택)

🗣️ 리뷰 요구사항 (선택)

• Routing 설정 부분에서 수정할 부분 있으면 리뷰 부탁드립니다.

[jaeml06]

페이지라우터 설정확인했습니다.
BrowserRouter를 이용한 라우팅으로 해결해주네요.
혹시 BrowserRouter를 사용하신 이유가 있을까요?
리액트 라우터 v6.4버전 이상에서 부터 다른 라우터 방식도 제공하고 있습니다.
https://reactrouter.com/6.28.1/routers/picking-a-router
createBrowserRouter인데요. 공식 홈페이지에도 업데이트할 것을 권장하고 있습니다.

우리 프로젝트에서는

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { RouterProvider } from 'react-router-dom';
import './index.css';
import router from './router'; // 라우터 설정 파일을 분리

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <RouterProvider router={router} />
  </StrictMode>,
);

import { createBrowserRouter } from 'react-router-dom';
import TableSetup from './page/TableSetupPage/TableSetup';
import LoginPage from './page/LoginPage/LoginPage';

const router = createBrowserRouter([
  {
    path: '/',
    element: <TableSetup />,
  },
  {
    path: '/login',
    element: <LoginPage />,
  },
]);

export default router;

로 적용 가능할 것 같습니다.

엘 생각은 어떠신가요?

[eunwoo-levi]

@jaeml06 답장해주셔서 감사합니다.

https://reactrouter.com/7.1.0/start/library/routing

최근까지 Next.js로 주로 서비스를 만들어와서 자동 Routing을 지원하는 이유로 'createBrowserRouter' 방식이 React 6.4 부터 지원되는 부분을 모르고있었네요.
이전에는 위 방법과 같은 방식으로 이전에 써왔었는데 치코님이 알려주신 방법이 프로젝트가 커지면 라우팅 설정을 더 잘 관리할 수 있는 장점이 있는 것 같습니다.

의견 반영하겠습니다. 감사합니다.

[jaeml06]

@jaeml06 답장해주셔서 감사합니다.

https://reactrouter.com/7.1.0/start/library/routing

최근까지 Next.js로 주로 서비스를 만들어와서 자동 Routing을 지원하는 이유로 'createBrowserRouter' 방식이 React 6.4 부터 지원되는 부분을 모르고있었네요. 이전에는 위 방법과 같은 방식으로 이전에 써왔었는데 치코님이 알려주신 방법이 프로젝트가 커지면 라우팅 설정을 더 잘 관리할 수 있는 장점이 있는 것 같습니다.

의견 반영하겠습니다. 감사합니다.

넵 저도 최신 문서를 봤는데 64부터는 createBrowserRouter를 이용한 방식을 추천한다고 되어있는데 7.1.0문서에서는 해당 내용이 언급이 없어서 당황했네요. 설명도 기존의 방식으로 되어있고 createBrowserRouter가 사라진 것도 아니고 제대로 지원하는데 공식문서가 설명이 부족해서 좀 아쉽긴하더라고요.

[i-meant-to-be]

확인했습니다! 카톡 남겨주신 대로 코드가 어렵지 않아서 이해가 가네요.
다만 지금 두 분 말씀 나누신 거 보면 다른 대안이 있어 보이는데, 일단 승인을 남기기는 하겠으나, 혹시라도 개선된 버전으로 수정이 진행될 예정이라면 추가로 리뷰 요청 남겨주시면 확인할 수 있도록 할게요.

[eunwoo-levi]

@jaeml06 반영해서 커밋하였습니다. 확인 부탁드립니다.

• App.tsx파일은 사실 상 필요가 없어보이는데 빈 코드로 두는게 좋을까요?
• 추가 커밋을 남겼으나 이상하게 이후 PR Commits 기록에 안남는 이유가 무엇인지 아실까요?
  레포에서 feat/[FEAT] 페이지 라우팅 설정 #21 브랜치에는 정상적으로 커밋이 된 것을 확인할 수 있습니다.

[jaeml06]

넵 확인했습니다. 반영감사합니다.
질문에 대한 답변드리겠습니다!

• App파일 같은경우 불필요해졌으니 제거해도 된다고 생각합니다.

PR commit기록이면 이것을 말하는 것인가요? 아니면 다른 것인가요?

[jaeml06]

prettier에 eol설정되어있는데 혹시 prettier가 자동으로 적용되지 않는 것 같아요! 아니면 적용하지 않고 commit을 했거나...

[eunwoo-levi]

prettier 적용하였습니다. 확인 다시 해주시면 감사하겠습니다.

[jaeml06]

확인했습니다.