[React] 리액트 라우터

다음 내용은 책 '리액트를 다루는 기술'을 바탕으로 작성된 글입니다.

---

❓ 라우팅이란?

웹 애플리케이션에서 라우팅이라는 개념은 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것을 의미한다.

 

❓ 싱글 페이지 애플리케이션이란? 

하나의 페이지로 이루어진 애플리케이션이라는 의미이다.

 

싱글 페이지 애플리케이션이란 개념이 생기기 전에는 멀티 페이지 애플리케이션이 사용되었다.

멀티 페이지 애플리케이션에서는 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아오고, 페이지를 로딩할 때마다 서버에서 CSS, JS, 이미지 파일 등의 리소스를 전달받아 브라우저 화면에 보여 주었다.

 

반면 싱글 페이지 애플리케이션에서는 우선 웹 애플리케이션을 브라우저에 불러와 실행시킨 후, 사용자와의 인터랙션이 발생하면 필요한 부분만 JS를 사용하여 업데이트하는 방식을 사용한다.

만약 새로운 데이터가 필요하다면 전체 html이 아니라 서버 API를 호출하여 필요한 데이터만 새로 불러와 애플리케이션에서 사용할 수 있다. 

즉, html은 한 번만 받아와서 웹 애플리케이션을 실행한 후, 필요한 데이터만 받아와서 화면에 업데이트 하는 것이 싱글 페이지 애플리케이션이다.

 

사용자 인터랙션이 별로 없는 정적 페이지에서는 멀티 페이지 애플리케이션 방식이 적합하지만, 사용자 인터랙션이 많고 다양한 정보를 제공하는 모던 웹 애플리케이션에서는 싱클 페이지 애플리케이션 방식이 적합하다.

---

리액트 라우터 같은 라우팅 시스템은 사용자의 브라우저 주소창의 경로에 따라 알맞은 페이지를 보여준다.

이후 링크를 눌러서 다른 페이지로 이동할 때 서버에 다른 페이지의 html을 새로 요청하는 것이 아니라, 기존 브라우저의 History API를 이용하여 브라우저의 주소창의 값만 변경하고 기존에 페이지에 띄웠던 웹 애플리케이션을 그대로 유지하면서 라우팅 설정에 따라 또 다른 페이지를 보여준다.

 

리액트 라우터

- 라이브러리 설치

npm install react-router-dom

혹은

yarn add react-router-dom

 

- 프로젝트에 라우터 적용

프로젝트에 리액트 라우터를 적용할 때는 src/index.js 파일에서 react-router-dom에 내장되어있는 BrowserRouter 라는 컴포넌트를 사용하여 App을 감싸면 된다.

 

사용자의 브라우저 주소 경로에 따라 우리가 원하는 컴포넌트를 보여주려면 Route라는 컴포넌트를 통해 라우트 설정을 해주어야 한다.

 

Route 컴포넌트는 다음과 같이 사용한다.

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

그리고 Route 컴포넌트는 Routes 컴포넌트 내부에서 사용되어야 한다.

 

다음은 예시이다.

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

 

- Link 컴포넌트 :  다른 페이지로 이동하는 링크

웹페이지에서는 a 태그를 통해 다른 페이지로 이동하는 링크를 보여준다. 

a 태그를 통해 페이지를 이동하면 브라우저가 페이지를 새로 불러오기 때문에, 리액트 라우터를 사용하는 프로젝트에서는 a 태그를 바로 사용하면 안 된다. 

 

Link 컴포넌트 역시 a 태그를 사용하지만, 페이지를 새로 불러오는 것을 막고 History API를 통해 브라우저의 주소의 경로만 바꾸는 기능이 내장되어 있다.

 

다음과 같이 사용한다.

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

 

다음은 예시이다.

 

const Home = () => {
	return (
     <div>
      <p> 어쩌구 저쩌구 </p>
      <Link to ="/about"> 소개 </Link>
     </di>
    );
};

여기서 '소개' 를 누르면 위에서 "/about" 경로로 라우팅 되었던 About 컴포넌트가 보여지게 된다.