React Router DOM 소개

React Router Dom 이란?

애플리케이션에서 클라이언트 측 라우팅을 구현하기 위한 라이브러리이다.
이 라이브러리를 사용하면 사용자가 URL을 변경할 때 페이지를 새로 고치지 않고도
다양한 컴포넌트를 렌더링할 수 있다.

React Router Dom은 웹 애플리케이션의 네비게이션을 간편하게 만들어준다.

주요 기능
1. 라우팅: URL 경로에 따라 서로 다른 컴포넌트를 렌더링 할 수 있다.
2. 중첩 라우트: 라우트를 중첩하여 복잡한 UI를 구성할 수 있다.
부모 라우트 아래에 자식 라우트를 정의하여 여러 레벨의 내비게이션을 처리할 수 있다.
3. 동적 라우트: URL매개변수를 사용하여 동적으로 경로를 설정할 수 있다.
ex) /user/:id와 같은 경로를 정의하여 특정 사용자 ID에 따라 다른 정보를 표시할 수 있다.
4. 링크: <Link>컴포넌트를 사용하여 애플리케이션 내에서 다른 경로로 쉽게 이동할 수 있다. 이는 사용자가 클릭했을 때 페이지를 새로 고치지 않고도 다른 컴포넌트로 전환할 수 있게 해준다.
5. 리디렉션: 사용자가 특정 경로로 접근했을 때 다른 경로로 자동으로 이동하도록 설정할 수 있다. 예를 들어, 로그인하지 않은 사용자가 로그인 페이지로 리디렉션 될 수 있다.

여기까지가 React Router Dom이고
이 라이브러리를 사용하는 방법을 알아보자

1. yarn add react-router-dom 설치
2. pages폴더 생성 /Home.jsx, About.jsx 등 파일 생성
3. shared 폴더 생성 /Router.jsx 파일 생성
4. Router.jsx에

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "../pages/Home";
import About from "../pages/About";
import Works from "../pages/Works";
import Contact from "../pages/Contact";

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="/works" element={<Works />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

<Router path="/" element={} /> Home 컴포넌트를 접근하기 위해서는 path="/"가 필요하다.

5. App.jsx에 가져오기
   단 react-router-dom 에서 가져오는게 아니라 shared/Router에 내가 만들어 놓은 Router을 가져와야함

import Router from "./shared/Router";
function App() {
  	return <Router />;
}
export default App;

http://localhost:5173/about 형태로 url을 입력하면
home, contact 각 페이지로 잘 이동하는걸 볼 수 있다.

---

여기까지가 기본적인 리액트 라우터 돔의 사용 방법이다.

제공하는 여러 훅들을 알아보겠다.

가장 쓰임새가 많고 기본적인것들을 알아보면

• useNavigate
  버튼 또는 navgation을 눌렀을 때 이동하게 된다.

  사용법
  

• useLocation();
  콜솔로 location을 찍어보면

	const location = useLocation();
  	console.log(location);

key와 hash, pathname을 가져오는걸 볼 수 있다.
즉, 페이지에 대한 정보를 오브젝트 형태로 저장한다.
(마찬가지로 useLocation을 import해야함)

• <Link></Link>

jsx에서 a태그를 사용하면 새로고침되기 때문에 <Link>태그를 사용해야한다.

사용방법

개발자 도구에서 확인해보면 Link태그는 a태그로 변환된다.

(Link import해야함)