React.js study - 11

⭐️라우팅이란?

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

웹 애플리케이션을 만들 때 프로젝트하나의 페이지로 구성할 수도 있고 여러 페이지로 구성이 가능합니다.

예를 들어 블로그 애플리케이션은 여러 페이지로 구성되어 질 텐데

• 글쓰기 페이지 : 새로운 포스트를 작성하는 페이지
• 포스트 목록 페이지 : 블로그의 작성된 여러 포스트의 목록을 보여주는 페이지
• 포스트 읽기 페이지 : 하나의 포스트를 보여주는 페이지

이렇게 여러 페이지로 구성 된 웹 애플리케이션을 만들 때 페이지 별로 컴포넌트들을 분리해가면서 프로젝트를 관리하기 위해 필요한 것이 바로 라우팅 시스템입니다.

리액트에서 라우트 시스템을 구축하기위해 사용할 수 있는 선택지는 크게 두 가지가 있습니다.

• 리액트 라우터(React Router) : 이 라이브러리는 리액트의 라우팅 관련 라이브러리들 중에서 가장 오래됐고, 가장 많이 사용되고 있습니다. 컴포넌트 기반으로 라우팅 시스템을 설정할 수 있습니다.
• Next.js : 리액트 프로젝트의 프레임워크로 앞에서 사용한 Craete-React-App처럼 리액트 프로젝트 설정을 하는 기능, 라우팅 시스템, 최적화, 서버 사이드 렌더링 등 다양한 기능을 제공합니다.

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

싱글 페이지 애플리케이션이란 하나의 페이지로 이루어진 애플리케이션이라는 의미입니다

위에 그림은 멀티 페이지 애플리케이션으로 사용자가 다른 페이지로 이동 할 때마다 새로운 html을 받아오고, 페이지를 로딩할 때마다 서버에서 CSS, JS 이미지 파일 등의 리소스를 전달받아 브라우저 화면에 보여 주었습니다. 각 페이지마다 다른 html 파일을 만들어서 제공을 하거나, 데이터에 따라 유동적인 html를 생성 하였습니다.

사용자 인터랙션이 별로 없는 정적인 페이지들은 기존의 방식이 적합하지만, 사용자 인터랙션이 많고 다양한 정보를 제공하는 모던 웹 애플리케이션은 이 방식이 적합하지 않습니다. 새로운 페이지를 보여줘야 할 때마다 서버 측에서 준비를 한다면 그만큼 서버의 자원을 사용하는 것이고, 트래픽도 더 많이 나올 수 있기 때문이죠.

그래서 리액트 같은 라이브러리를 사용해서 뷰 렌더링을 사용자의 브라우저가 담당하도록 하고, 우선 웹 애플리케이션을 브라우저에 불러와서 실행시킨 후에 사용자와의 인터랙션이 발생 시에 필요한 부분만 자바스크립트를 사용하여 업데이트 하는 방식으로 사용하게 됐습니다.

위에 그림처럼 싱글 페이지 애플리케이션으로 html은 한번만 받아와서 웹 애플리케이션을 실행시킨 후, 이후에는 필요한 데이터만 받아와서 화면에 업데이트하는 것이 싱글 페이지 애플리케이션입니다.

싱글 페이지 애플리케이션은 기술적으로 한 페이지만 존재하지만, 사용자가 경험하기에는 여러 페이지가 존재하는 것처럼 느낄 수 있습니다.

⭐️리액트 라우터 적용하기

프로젝트에 라우터를 적용하기 위해서는 프로젝트 생성 및 라이브러리를 설치해야 합니다.

$ yarn create react-app router-tutorial

$ yarn add react-router-dom

1. 프로젝트에 라우터 적용

• src/index.js 파일에서 import { BrowserRouter } from ‘react-router-dom’;

  root.render(
  	<BrowserRouter>
  		<App/>
  	</BrowserRouter>
  );

1. Route 컴포넌트로 특정 경로에 원하는 컴포넌트 보여주기

• 사용자의 브라우저 주소 경로에 따라 우리가 원하는 컴포넌트를 보여주려면 Route라는 컴포넌트를 통해 라우트 설정을 해주어야 합니다. <Route path=”주소 규칙” element={보여 줄 컴포넌트 JSX} />

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

1. Link 컴포넌트를 사용하여 페이지 이동하기

• import { Link } from ‘react-router-dom’; <Link to=”/about”> </Link>
  

1. URL 파라미터와 쿼리스트링

• 페이지 주소를 정의할 때 가끔은 유동적인 값을 사용해야 할 때도 있습니다.
• URL 파라미터 예시 : /profile/velopoert
• 쿼리스트링 예시 : articles?page=1&keyword=react

파라미터 주소는 경로에 유동적인 값을 넣는 형태고,쿼리스트링은 주소의 뒷부분에 ? 문자열 이후에 key=value 형태로 값을 정의하며 &로 구분하는 형태 입니다.

URL 파라미터는 주로 ID 또는 이름을 사용하여 특정 데이터를 조회할 때 사용하고, 쿼리스트링은 키워드 검색, 페이지네이션, 정렬 방식 등 데이터 조회에 필요한 옵션을 전달할 때 사용합니다.

import React from 'react';
import { BrowserRouter as Router, Routes, Route, useParams } from 'react-router-dom';

const User = () => {
  const { id } = useParams();
  return <h2>User ID: {id}</h2>;
};

const App = () => (
  <Router>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/user/:id" element={<User />} />
    </Routes>
  </Router>
);

export default App;

User 컴포넌트는 URL 경로의 파라미터를 받아서 화면에 출력합니다. 예를 들어, /user/123 경로로 접속하면 "User ID: 123"이 화면에 표시됩니다.

쿼리스트링을 사용하는 방법

import React from 'react';
import { BrowserRouter as Router, Routes, Route, useLocation } from 'react-router-dom';
const Home = () => <h2>Home</h2>;
const About = () => <h2>About</h2>;
const QueryPage = () => {
  const location = useLocation();
  const query = new URLSearchParams(location.search);
  const name = query.get('name');
  const age = query.get('age');
  return (
    <div>
      <h2>Query Page</h2>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
};
const App = () => (
  <Router>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/query" element={<QueryPage />} />
    </Routes>
  </Router>
);

export default App;

쿼리 스트링을 사용하려면 useLocation 훅을 사용하여 현재 위치 객체를 가져오고, URLSearchParams 객체를 사용하여 쿼리 스트링을 파싱합니다.
QueryPage 컴포넌트는 현재 URL의 쿼리 스트링을 가져와 화면에 출력합니다. 예를 들어, /query?name=John&age=30 경로로 접속하면 "Name: John"과 "Age: 30"이 화면에 표시됩니다.

1. 중첩된 라우트

중첩된 라우트는 리액트 라우터 돔을 사용하여 라우트 내부에 또 다른 라우트를 포함시키는 기능입니다. 이를 통해 더 복잡한 네비게이션 구조를 관리하고, 다양한 레벨의 URL 경로를 처리할 수 있습니다.

1. Outlet

Outlet은 부모 라우트 컴포넌트 내에서 자식 라우트 컴포넌트가 표시될 위치를 정의합니다. 부모 라우트 컴포넌트가 렌더링될 때, Outlet이 포함된 위치에 해당 자식 라우트가 렌더링됩니다.

⭐️리액트 라우터 부가 기능

useNavigate

• 컴포넌트 내부에서 특정 이벤트가 발생했을 때(예: 버튼 클릭) 프로그래밍적으로 다른 경로로 이동할 수 있도록 합니다.
• const navigate = useNavigate(); navigate('/target-path');
  

navLink

• NavLink는 네비게이션 링크를 만들 때 사용되며, 현재 URL과 링크의 경로가 일치하는 경우 자동으로 활성화 상태를 적용할 수 있는 컴포넌트입니다. 이를 통해 네비게이션 메뉴에서 활성화된 링크에 스타일이나 클래스를 쉽게 추가할 수 있습니다.
• import { NavLink } from 'react-router-dom'; <NavLink to="/path">Link Text</NavLink>