리액트 심화 기능 )) 페이지 라우팅

1. 라우팅의 기본 개념들

1) 라우팅

• 라우팅은 경로를 의미하는 Route와 진행을 의미하는 ing가 합쳐진 단어 : '경로를 지정하는 과정'
• 라우팅 : 데이터 전달을 목적으로 최적의 경로를 찾아 데이터를 전송하는 과정
• 예로들면 메시지 데이터는 휴대폰에서 휴대폰으로 바로 전송하는 것이 아닌, 중간중간 설치된 라우터라 불리는 장비를 거친다.  데이터를 한 번에 전송하기에는 물리적으로 거리가 너무 멀기 때문이다.
• 라우터도 현재 위치에서 가장 빨리 이동하는 경로를 찾아 메시지를 전송한다.

2) 페이지 라우팅

• 페이지 라우팅 : URL요청경로에 따라 적절한 페이지를 반환하는 일련의 과정
• 경로 : URL에서 .com/ 뒤에 붙는 것을 '경로'라고 한다.
• 경로에 아무것도 표시하지 않으면 웹서비스는 시작페이지를 보여준다. 이 페이지를 인덱스페이지라고 한다.

3) 리액트의 페이지 라우팅

• 페이지 라우팅의 구현은 웹페이지를 어디서 만드느냐에 따라 두가지로 구분한다.
• 서버 사이드 렌더링, 클라이언트 사이드 렌더링
• 리액트에서는 클라이언트 사이드 렌더링 방식을 채택한다.

4) 서버 사이드 렌더링

• 서버 사이드 렌더링 동작 방식

tistory.com/manage라는 URL로 서비스를 요청한다.
웹서버는 요청 URL에서 경로 manage를 확인하고, manage.html을 생성해 반환한다.
웹 브라우저는 웹서버에서 반환된 manage.html을 보여준다.
페이지를 이동할 때 페이지가 교체되기 때문에 브라우저가 깜빡이면서 새로고침이 발생한다.

• 웹 브라우저에 표시할 페이지를 웹 서버에서 만들어 전달한다.
• 서버 사이드 렌더링의 장점

검색 엔진을 최적화하며, 처음 접속할 때 속도가 빠르다는 장점이 있다.

• 서버 사이드 렌더링의 단점

사용자가 페이지를 이동할 때마다 서버가 새로운 페이지를 생성해 제공하려면 많은 연산을 수행하게 된다.
수많은 요청이 동시에 이루어지는 서비스는 서버에 부하가 걸릴 위험성이 높다.
페이지를 이동할 때마다 브라우저는 서버가 제공하는 페이지를 기다려야 하기 때문에 속도가 느려진다.

5) 클라이언트 사이드 렌더링

• 리액트 앱은 html 파일이 하나뿐인 단일 페이지 애플리케이션이다.
• html 파일이 하나뿐이기 때문에 서버사이드가 아닌 클라이언트 사이드 렌더링으로 페이지를 라우팅한다.
• 클라이언트 사이드 렌더링 동작 방식

tistory.com/manage로 서비스를 요청한다.
웹서버는 URL의 경로를 따지지 않고 페이지의 틀 역할을 하는 index.html과 리액트 앱을 반환한다.
웹브라우저는 서버에서 제공된 index.html 페이지를 보여준 후 JS로 이루어진 리액트 앱을 실행하여 현재 경로에 맞는 페이지를 보여준다.
사용자가 페이지를 이동하면 웹브라우저는 서버에서 받은 리액트 앱을 실행해 자체적으로 페이지를 교체한다.

• 사용자가 보는 페이지를 웹서버가 아닌 브라우저가 완성한다.(서버는 경로를 안따지고 index.html 반환)
• 처음 접속할 때만 서버에세 데이터를 요청하며, 페이지를 이동할 때는 별도의 요청을 하지 않는다.
• 클라이언트 사이그 렌더링의 단점

처음 사이트에 접속할 때는 사이드 렌더링보다 속도가 느리다.

• 클라이언트 사이드 렌더링의 장점

페이지를 이동할 때는 브라우저에서 페이지를 직접 교체하므로 속도가 훨씬 빠르다.

 

*두 렌더링 방식의 장점을 합쳐 놓은 것 => Next.js

2. 리액트 라우터로 페이지 라우팅하기

1) 리액트 라우터란?

• 페이지 라우팅 전용 라이브러리를 이용하면 필요한 기능을 손쉽게 구현할 수 있다.
• 리액트 라우터는 Remix 팀에서 제작한 오픈소스 라이브러리이다.
• 이 라우터를 이용하면 단 몇 줄의 코드만으로 여러 페이지로 구성된 리액트 앱을 간단히 구축할 수 있다.

2) 리액트 라우터 설치하기

• npm을 이용해 프로젝트에 설치하기

웹용 : npm i react-router-dom
모바일 애플리케이션용 : npm i react-router-native

• 성공적으로 설치했다면 package.json - dependencies에서 버전 확인

"react-router-dom" : "^6.4.3"
버전을 x.y.z로 표기할 때 x버전이 6인지 확인한다.(x버전이 5이하라면 제거하고 다시 설치한다.)
npm uninstall react-router-dom
npm install react-router-dom@6

3) 프로젝트에 라우터 적용하기

• BrowserRouter에는 브라우저의 주소 변경을 감지하는 기능이 있다.
• 이 라우터는 컴포넌트가 페이지를 구성하고 이동하는 데 필요한 기능을 다양하게 제공한다.

index.js

(...)
import { BrowserRouter } from "react-router-dom";

const root = ReactDom.createRoot(document.getElementById("root"));
root.render(
	<Browser Router>
    	<App />              //App컴포넌트의 부모컴포넌트로 Browser Router 컴포넌트 설정
    </Browser Router>
);

4) 페이지 컴포넌트 만들기

• 페이지 역할을 담당할 컴포넌트부터 만든다.
• 페이지 역할을 담당할 컴포넌트는 별도의 폴더로 분리한다.

5) 페이지 라우팅 구현하기

• 페이지 컴포넌트를 만들었으면 URL경로에 따라 브라우저에 적절한 페이지를 렌더링하도록 페이지 라우팅을 구현한다.
• react-router-dom이 제공하는 Routes, Route 컴포넌트를 이용하면 간단하게 구현가능하다.
• Routes는 여러 Route 컴포넌트를 감싼다. (Switch Case문과 비슷하다.)
• Routes는 자신이 감싸는 Route 컴포넌트 중에서 브라우저 주소 표시줄에 입력된 URL 경로와 일치하는 요소를 찾아 페이지에 렌더링한다.
• Routes는 자식인 Route컴포넌트에서 설정한 경로와 요청 URL을 비교하여 정확히 일치하는 컴포넌트를 element 속성에 전달해 렌더링한다.
• 설정하지 않은 경로로 접근시 Routes는 페이지에 아무것도 렌더링하지 않는다.

App.js

import { Routes, Route } from "react-router-dom";
import "./App.css";
import Home from "./pages/Home";
import Board from "./pages/Board";
import Question from "./pages/Question";

function App(){
	return(
    	<div className="App">
        	<Routes>
            	<Route path="/" element={<Home />} />
                <Route path="/Board" element={<Board />} />
                <Route path="/Question" element={<Question />} />
            </Routes>
        </div>
    );
}

export default App

6) 페이지 이동 구현하기

• Link 컴포넌트는 to 속성에 경로를 지정해 페이지를 이동한다.

<Link to='이동할 경로'>링크 이름</Link>

• 클라이언트 사이드 렌더링은 페이지를 서버에 요청하지 않고 브라우저가 직접 이동시킨다.
• <a> 태그를 이용하면 브라우저는 현재 페이지를 지우고 새로운 페이지를 불러오는 방식으로 이동하기 때문에 클라이언트 사이드 렌더링 방식으로 이동하는 것이 아니다!

App.js

import { Routes, Route, Link } from "react-router-dom";
import "./App.css";
import Home from "./pages/Home";
import Board from "./pages/Board";
import Question from "./pages/Question";

function App(){
	return(
    	<div className="App">
        	<Routes>
            	<Route path="/" element={<Home />} />
                <Route path="/Board" element={<Board />} />
                <Route path="/Question" element={<Question />} />
            </Routes>
            <div>  //3개의 Link를 화면에 렌더링 해준다.
            	<Link to={"/"}>Home</Link>
                <Link to={"/Board"}>Board</Link>
                <Link to={"/Question"}>Question</Link>
            </div>
        </div>
    );
}

export default App;

3. 리액트 라우터로 동적 경로 라우팅하기

1) 동적경로란

• 동적경로 : 특정 아이템을 나타내는  id처럼 값이 변하는 요소를 URL에 포함하는 경우
• 동적경로는 특정 데이터를 조회하는 주소표현으로 자주 사용한다.
• 아이디가 1 인 경우 => '/Board/1' 또는 '/Board?id=1' 으로 표기할 수 있음.

2) 동적 경로를 표현하는 방법 2가지

• URL 파라미터 : URL에 유동적인 값을 넣는 방법(유동적인 값은 중괄호로 표기한다.)
• URL파라미터 방식은 주로 id나 이름을 이용해 특정 데이터를 조회할 때 사용한다.

https://localhost:3000/Board/{id}

• 쿼리 스트링 : 물음표 뒤에 key=value 문법으로 URL에 유동적인 값을 포함하는 방법(유동적인 값을 2개 이상 포함해야 하는 경우 &으로 구분한다.
• 쿼리 스트링 방식은 보통 게시물 리스트에서 사용자가 정렬 조건을 선택하거나 현재 조회하는 게시판의 페이지를 표현할 때 사용한다.

https://localhost:3000?sort=latest&page=1

3) 동적경로가 포함된 페이지를 렌더링하는 페이지 라우팅 구현

[ URL 파라미터로 경로 설정하기 ]

• <Route path="/Board/:id" element={<Board /> />

App.js

(...)
function App(){
(...)
	return(
    	<div className="App">
        	<Routes>
            	<Route path="/" element={<Home />} />
                <Route path="/Board/:id" element={<Board />} />
                <Route path="/Question" element={<Question />} />
            </Routes>
            (...)
        </div>
    );
}

export default App

• URL 파라미터 값 불러오기 : URL 파라미터로 전달한 id를 불러와 Board페이지에서 사용
• UseParams( ) : 브라우저에서 URL을 입력하면 해당 경로에 포함된 URL 파라미터를 객체 형태로 반환해준다.

Board.js

import{ useParams } from "react-router-dom";
const Board = () => {
	const params = useParams();  //이 경로에 포함된 URL 파라미터를 객체 형태로 반환한다.
    console.log(params);
    return <div>Board 페이지입니다.<div>
};

export default Board


<localhost:3000/board/1 주소로 접속 => Console 창>
{ id: "1" }

• 이 파라미터 값을 사용하려면 객체를 구조분해할당하여 필요한 값만 꺼내 쓰면 된다.

Board.js

import{ useParams } from "react-router-dom";
const Board = () => {
	const{ id } = useParams();  //이 경로에 포함된 URL 파라미터를 객체 형태로 반환한다.

    return(
        <div>
            <div>Board 페이지입니다.<div>
            <div>{id}번 게시글</div>
        <div>
    );
};

export default Board;

[ 쿼리 스트링으로 값 불러오기 ]

• URL 파라미터처럼 페이지 라우팅을 위한 별도의 설정이 필요없다.
• 쿼리스트링을 편하게 이용할 수 있도록 useSearchParams 라는 리액트 훅을 제공한다.(useState와 비슷하게 사용)
• useSearchParams 

이 훅을 사용하면 URL에 있는 쿼리 스트링 값을 거내 사용할 수 있다.
useState 처럼 배열 형태로 값을 반환한다.
- 반환 값의 첫 번째 요소 : 조회, 수정이 가능한 메서드를 포함하고 있는 쿼리스트링 객체
- 반환 값의 두 번째 요소 : 이 객체를 업데이트하는 함수

Home.js


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

const Home = () => {
	const [ searchParams, setSearchParams ] = useSearchParams();
    console.log(searchParams.get("sort"));
    
    return <div>Home페이지 입니다.</div>;
};
export default Home;



<localhost:3000/?sort=latest 주소로 접속 => console 창>
latest