React Router

라우팅

웹 애플리케이션에서 라우팅이라는 개념은 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것을 의미
라우팅 관련 기능은 리액트 라이브러리에서 공식적으로 지원하는 것이 아니라 써드 파티로서 제공
리액트에서 라우트 시스템을 구축하기위해 사용할 수 있는 선택지는 크게 두가지가 존재

• React Router
• Next.js

싱글 페이지 애플리케이션

한 개의 페이지로 이루어진 애플리케이션이라는 의미
기존 멀티 페이지 애플리케이션 처럼 사용자가 다른 페이지로 이동할 때마다 새로운 html 을 받아오거나 페이지를 로딩할 때마다 서버에서 CSS, JS, 이미지 파일 등의 리소스를 전달받아 브라우저 화면에 보여 주는 것이 아닌 html 은 한번만 받아와서 웹 애플리케이션을 실행시킨 후 필요한 데이터만 받아와서 화면에 업데이트 해주는 것
싱글 페이지 애플리케이션은 기술적으로는 한 페이지만 존재하는 것이지만, 사용자는 여러 페이지가 존재하는 것 처럼 느낌

React Router

공식 사이트: https://reactrouter.com/en/main
설치: yarn add react-router-dom

리액트의 라우팅 관련 라이브러리들 중에서 가장 오래됐고, 가장 많이 사용
컴포넌트 기반으로 라우팅 시스템을 설정가능
리액트 라우터를 사용하면 손쉽게 싱글 페이지 애플리케이션구현 가능

API

BrowserRouter

BrowserRouter 라는 컴포넌트를 사용하면 웹 애플리케이션에 HTML5 의 History API 를 사용하여 페이지를 새로 불러오지 않고도 주소를 변경하고 현재 주소경로에 관련된 정보를 리액트 컴포넌트에서 사용할 수 있도록 해 줌

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

Routes & Route

Router 라는 컴포넌트를 사용하여 사용자의 브라우저 주소 경로와 컴포넌트를 매핑할 수 있음

<Route path="주소규칙" element={보여 줄 컴포넌트 JSX} />

Route 컴포넌트는 반드시 Routes 컴포넌트 내부에서 사용

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

Link

a 태그를 클릭하여 페이지를 이동할 때 브라우저에서는 페이지를 새로 불러오기 때문에 리액트 라우터를 사용하는 프로젝트에서 a 태그를 바로 사용하면 안됨

Link 컴포넌트 역시 a 태그를 사용하긴 하지만, 페이지를 새로 불러오는 것을 막고 History API 를 통해 브라우저 주소의 경로만 바꿈

<Link to="경로">링크 이름</Link>

useNavigate

useNavigate 는 Link 컴포넌트를 사용하지 않고 다른 페이지로 이동을 해야 하는 상황에 사용할 수 있는 Hook

const navigate = useNavigate();

  const goBack = () => {
    // 이전 페이지로 이동
    navigate(-1);
  };

  const goArticles = () => {
    // articles 경로로 이동
    navigate('/articles');
  };

NavLink

NavLink 컴포넌트는 링크에서 사용하는 경로가 현재 라우트의 경로와 일치하는 경우 특정 스타일 또는 CSS 클래스를 적용할 때 사용되는 컴포넌트

NavLink 컴포넌트를 사용하면 style 또는 className 을 설정할 때 { isActive: boolean } 을 파라미터로 전달받는 함수 타입의 값을 전달받음

<NavLink 
  style={({isActive}) => isActive ? activeStyle : undefined} 
/>

<NavLink 
  className={({isActive}) => isActive ? 'active' : undefined} 
/>

Navigate

Navigate 컴포넌트는 컴포넌트를 화면에 보여주는 순간 다른 페이지로 이동을 하고 싶을 때 사용하는 컴포넌트로 페이지를 리다이렉트 하고 싶을 때 사용

if (!isLoggedIn) {
	return <Navigate to="/login" replace={true} />;
}

replace props는 페이지를 이동할 때 현재 페이지를 기록에 남기지 않기 때문에 이동 후 뒤로가기를 눌렀을 때 2 페이지 전의 페이지로 이동