React

Router

• 전통적으로 새로운 페이지로 이동할 때 페이지 정보를 url 주소를 통해 서버에 요청하고 전달 받았다.

But!

• SinglePageApplication 를 사용하기 시작한 후

• 서버에서 app 전체를 받아오고 client가 필요한 부분을 url 변경을 통해 사용하는 방식을 사용한다.

SPA 라우팅 과정

1. 브라우저에서 최초에 '/' 경로로 요청을 하면,
2. React Web App 을 내려준다.
3. 내려받은 ReactApp 에서 '/'경로에 맞는 컴포넌트를 보여준다.
4. ReactApp 에서 다른 페이지로 이동하는 동작을 수행하면,
5. 새로운 경로에 맞는 컴포넌트를 보여준다.

react-router-dom

npm i react-router-dom

• v6 부터는 Route는 Routes 안에 있어야만 한다.

• v5 로 익히면서 v6에서 변화가 생긴것들을 따로 학습한다.

// react-router-dom v5
function App() {
  return (
    <BrowserRouter>
      <Route path="/" element={Home} />
      <Route path="/Profile" element={Profile} />
      <Route path="/About" element={About} />
    </BrowserRouter>
  );
}

• props 넣어주기

• http://localhost:3000/profile/1

function App() {
  return (
    <BrowserRouter>
      <Route path="/" exact component={Home} />
      <Route path="/Profile/:id" component={Profile} />
      <Route path="/About" component={About} />
    </BrowserRouter>
  );
}