[React] 라우팅

라우팅

• 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것
• 여러 페이지로 구성된 웹 애플리케이션을 만들 때 페이지 별로 컴포넌트들을 분리해가면서 프로젝트를 관리하기 위해 필요한 것

리액트에서 라우트 시스템을 구축하는 방법

1. 리액트 라우터

• 가장 많이 사용되는 라이브러리
• 컴포넌트 기반으로 라우팅 시스템을 설정

2. Next.js 

• 리액트 프로젝트의 프레임워크
• 파일 경로 기반으로 작동
• 리액트 라우터의 대안으로 많이 사용됨

---

멀티 페이지 애플리케이션 (MPA)

• 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아오고, 페이지를 로딩할 때 마다 서버에서 CSS, JS, 이미지 파일 등의 리소스를 전달받아 브라우저 화면에 보여줌
• 사용자 인터랙션이 별로 없는 정적인 페이지들은 기존의 방식이 적합
  •  but 사용자 인터랙션이 많고 다양한 정보를 제공하는 모던 웹 애플리케이션은 적합하지 않음
  • 새로운 페이지를 보여줘야할 때마다 서버 측에서 모든 준비를 한다면 그만큼 서버의 자원을 사용하는 것이고 트래픽도 더 많이 나오기 때문

→  그래서 리액트 같은 라이브러리를 사용해 뷰 렌더링을 사용자의 브라우저가 담당하도록 함

• 사용자와의 인터랙션이 발생하면 필요한 부분만 자바스크립트를 사용해 업데이트하는 방식을 사용
• 만약 새로운 데이터가 필요하다면 서버 API를 호출해 필요한 데이터만 새로 불러와 애플리케이션에서 사용할 수 있게 됨

싱글 페이지 애플리케이션 (SPA)

• 하나의 페이지로 이루어진 애플리케이션

• html은 한번만 받아와 웹 애플리케이션을 실행시킨 후 필요한 데이터만 받아와 화면에 업데이트 하는 것
• 기술적으로는 한 페이지만 존재하지만, 사용자가 경험하기에는 여러 페이지가 존재하는 것처럼 느껴짐

---

리액트 라우터 사용법

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

• 라우터 적용은 index.js에서 BrowserRouter라는 컴포넌트를 사용하여 구현

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom'; // * BrowserRouter 불러오기
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

// * App 을 BrowserRouter 로 감싸기
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

[Route 컴포넌트 사용 방식]

<Route path="주소규칙" component={보여주고싶은 컴포넌트}>

// src/App.js
import React from 'react';
import { Routes, Route } from 'react-router-dom';
import About from './About';
import Home from './Home';

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

export default App;

• exact={true}는 경로가 완벽히 똑같을 때만 컴포넌트를 보여줌 
  • v6부터는 exact 없이 있는 url 형식으로 구성하기 위해서는 * 를 사용하도록 권고

리액트 라우터에서는 a태그를 사용하면 안되는 이유

: a태그를 클릭하여 페이지를 이동하게되면 브라우저에서는 페이지를 새로 불러오게 됨

2. Link 태그

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

// src/pages/Home.js
import { Link } from 'react-router-dom';

const Home = () => {
	return (
    	<div>
        	<h1>홈</h1>
            <p>가장 먼저 보여지는 페이지입니다.</p>
            <Link to = "/about"> 소개 </Link>
        </div>
    );
 };
 
 export default Home;

---

파라미터와 쿼리스트링

• 파라미터 : 특정 id나 이름을 가지고 조회를 할 때 사용
• 쿼리 : 어떤 키워드를 검색하거나 요청할 때 필요한 옵션을 전달 할 때 사용

파라미터: /profiles/velopert
쿼리: /about?details=true

URL Params : useParams()

url 파라미터를 통해서 여러개의 페이지를 생성하고 싶을때, useParams()를 사용할수 있다.

useParams() : 어떤 페이지에 어떤 데이터가 들어갈지를 정해줌

사용 방법

1) 라우터 설치

npm install react-router-dom

2) useParams를 import 한다

3) useParams 정보를 하나의 변수에 저장

3) 파라미터 값 사용

import React from 'react';
import { useParams } from 'react-router-dom';

const test = () => {
  let { params } = useParams();

  return (
    <div className="test">
      <p>현재 페이지의 파라미터는 { params } 입니다.</p>
    </div>
  )
}

export default test;

ex)  /test/1 은 파라미터가 1이므로,  현재 페이지는 파라미터가 1입니다.라고 출력된다.

( 또 다른 예시 참고)

https://react.vlpt.us/react-router/02-params-and-query.html

2. 파라미터와 쿼리 · GitBook

쿼리스트링 : useLocation(), useSearchParams()

• url에서 물음표 다음으로 오는 것들을 의미
• 요청하고자 하는 URL에 부가적인 정보를 포함하고 싶을 때 사용
  •  상품 종류가 1000개라면 '상품 리스트 보여줘' 가 아닌 '상품 리스트를 최신순으로 상위 10개만 보여줘'

useLocation

import { useLocation } from "react-router-dom";

const List = () => {
  const location = useLocation();

  return (
    <section>
      <h1>This is List Page</h1>
      <p>
        쿼리 스트링: <b>{location.search}</b>
      </p>
    </section>
  );
};

export default List;

?를 지우고, &를 분리한 뒤 key와 value를 파싱하는 별도의 작업이 필요

→ 원하는 값을 가져올 수 있게 useSearchParams를 사용

useSearchParams

const [searchParams, setSearchParams] = useSearchParams();

 

자주 사용하는 메서드

• 값을 읽어오는 메서드
  • searchParams.get(key) - 특정한 key의 value를 가져오는 메서드, 해당 key 의 value 가 두개라면 제일 먼저 나온 value 만 리턴
  • searchParams.getAll(key) - 특정 key 에 해당하는 모든 value 를 가져오는 메서드
  • searchParams.toString() - 쿼리 스트링을 string 형태로 리턴
• 값을 변경하는 메서드
  • searchParams.set(key, value) - 인자로 전달한 key 값을 value 로 설정, 기존에 값이 존재했다면 그 값은 삭제됨
  • searchParams.append(key, value) - 기존 값을 변경하거나 삭제하지 않고 추가하는 방식
• searchParams 을 변경하는 메서드로 값을 변경해도 실제 url 의 쿼리 스트링은 변경되지 않습니다.
• 이를 변경하려면 setSearchParams 에 searchParams 를 인자로 전달해야 합니다.

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

const List = () => {
  const [searchParams, setSearchParams] = useSearchParams();
  
// set 메서드를 사용해 sort 라는 키에 clear 라는 밸류를 설정한 후 현재 url 의 쿼리 스트링을 변경
  const setSortParams = () => {
    searchParams.set('sort', 'clear');
    setSearchParams(searchParams);
  };
  
// append 메서드를 사용하면 기존 값을 유지하며 sort 라는 키에 hello-world 라는 밸류를 추가할 수 있습니다.
  const appendSortParams = () => {
    searchParams.append('sort', 'hello-world');
    setSearchParams(searchParams);
  };

(ex) 페이지네이션 예시

https://velog.io/@rayong/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EA%B8%B0%EC%B4%88-%EC%BF%BC%EB%A6%AC-%EC%8A%A4%ED%8A%B8%EB%A7%81-useSearchParams

리액트 기초, 쿼리 스트링, useSearchParams

---

중첩된 라우트

현재 라우트 위치에 더해 준다

<Routes>
  <Route path="/member" element = {<member/>} >
    <Route path=":memberId" element={<memberInfo/>} /> <!-- /member/:memberId -->
  </Route>
</Routes>

{/* Member */}
<div>
  <header>Member</header>
  <Outlet />  <!-- MemberInfo의 component가 Outlet의 위치에 위치하게 된다. -->
</div>

• member 라우트 하위에 :memberId 가 포함된 Route를 추가하면 중첩 라우팅이 됨
  • /member/yeeun
  • <member/>와  <memberInfo />를 다 보여줌
  • Outlet : <member/>안에  <memberInfo />를 표현하는데 그 때 어디에 표현할지 입력해줌

→ 공통적으로 보여줘야 하는 레이아웃이 존재할때 사용하면 유용함.

---

부가 기능

1. useNavigate

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

const naviagte= useNavigate();

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

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

2. NavLink

• 링크에서 사용하는 경로가 현재 라우트의 경로와 일치하는 경우 특정 스타일 또는 CSS 클래스를 적용하는 컴포넌트
  • Link에 스타일을 넣어줄수 있는 Link

import { NavLink } from "react-router-dom";

// style 속성으로 스타일 적용할 때
<NavLink to="경로" style={({isActive}) => ({
	css속성: isActive ? '활성화 되었을 때 스타일' : '비활성화 스타일',
    ...
    })}>
    내용
</NavLink>


// className 속성으로 스타일 적용할 때 
<NavLink to="경로" className={({isActive}) => {
	return isActive ? '클래스명' : '';
    }}>
    내용
</NavLink>

• 이 컴포넌트의 style콰 className은 { isActive : boolean }을 파라미터로 전달받는 함수 타입의 값을 전달
  • 현재 보고 있는 게시글의 링크에 css가 적용됨

3. NotFound 페이지 (404 page)

<Route path = "*" element={<NotFound />} />

• *(wildcard)는 일치하는 라우터가 없다면 이 라우트가 화면에 나타남 

4. Navigate 컴포넌트

• 컴포넌트를 화면에 보여주는 순간 다른 페이지로 이동하고 싶을 때 사용
  • 페이지 리다이렉트하고 싶을 때 사용
  • (ex) 사용자의 로그인이 필요한 페이지인데 로그인을 안했다면 로그인 페이지를 보여줌

// src/pages/Login.js
const Login = () => {
	return <div> 로그인 </div>;
};

export default Login;

// src/pages/Mypage.js
import {Navigate} from 'react-router-dom';

const MyPage = () => {
	const isLoggedIn = false;
    
    if(!isLoggedIn) {
    	return <Navigate to = "/login" replace = {true} />;
    }
    
    return <div>마이페이지</div>;
}

export default MyPage;