19.2 리액트 라우터가 있는 SPA 다중 페이지 구축하기: Link 작업하기(feat. 유데미 React 완벽 가이드)

https://www.udemy.com/course/best-react/

【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript

이 게시물은 유데미 React 완벽 가이드 강의를 보고 메모를 남기는 게시물 입니다.

---

Link

MPA 에서 링크 작업을 할때는 a태그를 활용하였는데 리액트에서도 a태그를 활용하면 SPA로 만들 수 없다.

대신 Link 컴포넌트를 react-router-dom 에서 가져와 a태그 대신 사용하면 상태를 유지한채로 사용이 가능하여

원하는대로 SPA를 만들 수 있다.

 

Link 사용하기

a 태그가 들어갈 곳을 Link로 넣어준다 그리고 props 로 herf 가 아닌 to로 바꾸어 주어 링크 설정을 하면 된다.

// MainHeader.js

import { Link } from "react-router-dom";

const MainHeader = () => {
  return (
    <header>
      <ul>
        <li>
          <Link to="/welcome">Welcome</Link>
        </li>
        <li>
          <Link to="/products">Products</Link>
        </li>
      </ul>
    </header>
  );
};

export default MainHeader;

위의 컴포넌트를 App에 적용하면 끝이다.

import { Route } from "react-router-dom";

import Welcome from "./pages/Welcome";
import Products from "./pages/Products";
import MainHeader from "./components/MainHeader";

function App() {
  return (
    <div>
      <MainHeader /> // 링크설정 컴포넌트 적용
      <main>
        <Route path="/welcome">
          <Welcome />
        </Route>
        <Route path="/Products">
          <Products />
        </Route>
      </main>
    </div>
  );
}

export default App;