주요 개념
- 함수형 컴포넌트 작성
- react-router-dom 패키지 사용하여 페이지 라우팅
실습 환경
- nodejs react 패키지
./App.js (라우팅 페이지)
- 최종 렌더링 컴포넌트 export
- 메뉴이동은 하위컴포넌트에서 url변경 없이 테스트 할 것이므로 메인/로그인/에러 페이지만 구분
- router 컴포넌트는 6버전부터 사용방법이 변경되었으므로 확인 필요
import React from "react";
import { BrowserRouter, Route, Routes} from "react-router-dom";
import { Main, Auth, PageNotFound } from "./Routes";
const App = () => {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Main />} />
<Route path="/Auth" element={<Auth />} />
<Route path="/*" element={<PageNotFound />} />
</Routes>
</BrowserRouter>
);
};
export default App;
프로젝트 구조
- App.js에서 Routes폴더로 라우팅
- Component/Structure 내 Component를 사용하여 페이지 구성
