리액트 라우터 돔 (React Router DOM)

강의를 몇 번이나 되돌리기 했는지

찾아본 블로그만 몇 개인지 모르겠다.

 

 

라우트(Route):

서로 다른 네트워크 간 데이터를 전송하고

전송한 데이터를 받는 경로

경로, 컴포넌트 및 기타 옵션을 포함하며, 

이 배열은 일반적으로 라우터의 설정에서 사용

 

라우터(Router):

라우팅 관련 라이브러리가 많으며

사람들이 가장 많이쓰는 라이브러리

 

라우팅(Routing):

엔드 포인트(URI, 경로)의 정의

해당 엔드포인트에 대한 클라이언트 요청에

애플리케이션이 응답하는 방식

 

라우츠(Routes):

라우터에 등록된 모든 라우트를 나타내는 객체

 

 

React Router Dom으로 페이지 이동을 구현하는 방법
1. Link 태그

HTML의 a 태그와 유사하지만,

페이지 전체를 다시 로드하지 않고도

클라이언트 측에서 페이지를 전환할 수 있게 해줌

예)

<Link to="/myPage">

   <myPageBtn type="button">마이페이지</ myPageBtn>

</Link>

 

2. useNavigate

프프로그래밍 방식으로

페이지 전환을 제어할 수 있게 해준다.
이 훅은 함수 컴포넌트 내

다른 페이지로 이동하는 기능을 구현할 때 유용합니다.
예를 들어,

버튼 클릭 이벤트 핸들러나

기타 논리적 조건에 따라 페이지 전환할 때 사용

// Home.jsx

import React from 'react';

import { useNavigate } from 'react-router-dom';

function Home() {

  const navigate = useNavigate();

  return (

    <div>

      <h1>포켓몬 도감</h1>

      <button onClick={() => navigate('/dex')}>포켓몬 도감 시작하기</button>

    </div>

  );

}

export default Home;

 

react-router-dom을 사용할 때에는

터미널에

yarn add react-router-dom을 입력해

라우터 돔을 설치해 주어야 한다.