react-router 설정

home 이라는 페이지랑 upload라는 페이지 두 개를 만들꺼다.

일단 mern-client/src 안에 pages라는 폴더를 하나 만든다. 앞으로 페이지 관련 파일들은 이 폴더 안에 생성하고 관리할 예정.

이 폴더 안에 Home이라는 폴더랑 Upload라는 폴더도 만들어준다.

대충 현재까지의 디랙토리 구조.,...

---

일단 home 부터 작성해본다.
Home 폴더 안에 index.tsx라는 파일을 생성한다.

tsx는 뭐임?
TypeScript와 JSX를 함께 사용하여 React 컴포넌트를 작성하는 파일
주로 react 프론트엔드 프로젝트에서 사용된다.

뭔지 잘 모르겠지만 일단 따라해보기...
index.tsx 파일 안의 내용을 아래와 같이 작성한다...

function Home() {
	return <div>Home</div>;
}

export default Home;

Upload 폴더 안에도 index.tsx 파일 만들고 아래와 같이 입력해준다..

function Upload() {
  return <div>Upload</div>;
}

export default Upload;

이렇게 페이지의 뼈대(?)를 작성하고 난 후,
경로에 따라 페이지를 분리해줄 수 있는 라우터를 만들어준다.
src 폴더에 AppRouter.tsx 파일을 만들어주고, 아래와 같이 내용을 입력한다.

import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "./pages/Home";
import Upload from "./pages/Upload";

function AppRouter() {
    return (
      <BrowserRouter>
        <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/upload" element={<Upload />} />
        </Routes>
      </BrowserRouter>
    );
}

export default AppRouter;

vscode 에서는 rfce라고 치면 이런 functional component를 자동으로 완성해주는 기능이 있다고 하니 참고하자....

그리고 app.tsx 파일도

import React from "react";
import AppRouter from "./AppRouter";

function App() {
  return <AppRouter />;
}

export default App;

아래와 같이 수정해주면 라우터 설정이 끝이 난다....

---

설정이 잘 되었는지 확인해보기 위해 npm run start 입력해서 localhost:3000에 접근해보면, 기본적으로 Home문자가 있는 페이지가 등장함 -> Home 페이지가 렌더링된 것

경로를 localhost:3000/upload로 바꾸면, Upload 문자가 있는 페이지가 나온다 -> Upload 페이지가 렌더링된 것