React router 리액트 라우터 사용해보자

 

리액트는 single page application 이다.

하나의 url에서 다 처리된다. 어휘력 무엇...

그럼 페이지가 많을때는 어떻게 되는거지?

react router를 쓰면 된단다.

 

좀 더 가다듬어 보자.

spa는 하나의 url로 로딩이 되고 어떠한 이벤트가 발생 했을 때 

새로운 페이지가 열리거나 전체적인 페이지가 리로드 되는 것이 아니라 부분적인 내용만 업데이트 되는 것이다.

이것의 문제는 뒤로가기, 앞으로가기나 즐겨찾기가 안된다는 것이다. 

이를 보완한 것이 react-router라고 한다.

 

$ npx create-react-app router-test

react 프로젝트를 생성해주고

 

$ yarn add react-router-dom

router를 추가해준다.

react-router-dom은 웹에서 쓰는 거라고 한다.

 

그럼 뭐가 겁나 깔림

 

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

index.js에 <BrowserRouter>를 넣어준다.

BrowserRouter는 historyAPI를 이용해서 url과 ui를 동기화 해준다고 한다.

 

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  );
}

App.js

 

const About = (props) => {
  return (
    <div>
      <h1>소개</h1>
      <p>이것은 라우터 실습</p>
    </div>
  );
};

About.js

const Home = (props) => {
  return (
    <div>
      <h1>홈</h1>
      <p>first page</p>
      <Link to="/about">소개</Link>
    </div>
  );
};

Home.js

 

아 참고로 react는 a태그 대신 Link를 쓰던데 차이가 궁금해서 찾아봤다.

검색해보니까 a 태그로 이동하게 되면 상태값을 잃고 속도가 저하된단다.

Link 컴포넌트는 브라우저의 주소만 바뀌고 새로운 페이지를 불러오지 않는다.

 

소개를 클릭하면

여기로 넘어온다.

 

 

Ref

---

https://velog.io/@kwonh/React-react-router-dom-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0

[React] react-router-dom 시작하기

https://velog.io/@velopert/react-router-v6-tutorial

React Router v6 튜토리얼

https://gomgomkim.tistory.com/9

[React] Link와 <a>태그의 href의 차이