react route

route : 경로.
라우팅(영어: routing)은 어떤 네트워크 안에서 통신 데이터를 보낼 때 최적의 경로를 선택하는 과정이다. 출처 위키피디아.

대충 다른 페이지로 이동하는 방법 쯤으로 생각함.
react는 쌩 html css js랑 달리
하나의 html파일만 있고, 다른페이지를 요청하면 해당 부분의 컴포넌트를 불러오는 형식으로 작동.
그래서 라우팅을 뭘로 하냐?
react-router 라는 라이브러리를 많이 씀

react-router

리액트 라이브러리. 다른페이지로 이동하는 걸 편하게 해줌.

설치방법

1. https://reactrouter.com/home 접속
2. 시키는대로 따라하기

//1. 프로젝트 경로에 설치
npm install react-router-dom@6
//2. App 컴포넌트에 import, BrowserRouter로 감싸기
import { BrowserRouter } from "react-router-dom"; //import

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <BrowserRouter> //여기
      <App />
    </BrowserRouter>
  </StrictMode>
);
//3. App.js에서 import, 사용하기
import Detail from "./detail.jsx";

Routes

경로를 모아두는 곳.
메인페이지, 상세페이지, about 페이지 등, 여러 페이지로 이동하는 경로들을 싹다 여기 Routes에 모아둔다.

      <Routes>
        <Route path="/" element={<div>main페이지임</div>} />
        <Route path="/detail" element={<div>detail페이지임</div>} />             
        <Route path="/about" element={<div>about페이지임</div>} />
      </Routes>

Route

이동 경로를 나타내는 태그. path로 url을, element로 해당 url로 접속 시 보여줄 html을 적는다.
해당 Route의 element에 적은 부분은 path의 url로 접속해야만 보임(당연한 말).

        <Route
          path="/"
          element={
            <div>
              {" "}
              <div className="main-bg"></div>
              <div className="container">
                <div className="row">
                  {data.map((shoes, i) => (
                    <ShoesCard shoes={shoes} i={i} />
                  ))}
                </div>
              </div>
            </div>
          }
        />
        <Route

Link

다른 페이지로 이동할 수 있게 만들어주는 태그. 대충 이동버튼.
to 로 원하는 url로 이동할 수 있게 해준다.

            <Link to="/">홈버튼</Link>
            <Link to="/detail">상세페이지</Link>
            <Link to="/about">about</Link>

큰 페이지를 기능별로 조각낼 수 있게 해주는 유용한 기능이라 생각됨.
상세페이지같은것들은 따로 파일로 빼내서 컴포넌트화 시키면 편할 것 같음.