리액트

리액트 - 페이지 라우팅

유니유뉘 2023. 1. 28. 15:35
728x90

PAGE ROUTING

 

ROUTING이란 어떤 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 일련의 과정이다.

데이터들도 네트워크 장치들을 환승하듯이 이동한다.

ROUTER - 데이터의 경로를 실시간으로 지정해주는 역할을 한다.

ROUTE + ING - 경로를 정해주는 행위 자체와 그런 과정들을 다 포함하여 일컫는다.

 

PAGE ROUTING이란?

요청에 따라 알맞은 페이지를 선택하고 반환해서 사용자가 그 페이지에 접속하는 행위이다.

예를 들어 /home 이라는 페이지를 요청하면 웹 서버에서는 이 요청에 맞는 Home.html 파일을 반환하고 사용자는 /home에 접속한다.

 

React SPA & CSR

여러개의 페이지를 준비했다가 적절한 페이지를 보내는 행위 → MPA(Multipage Application)

리액트는 SPA방식을 따른다. 단일페이지어플리케이션으로 페이지가 1개 밖에 없다. → SPA(Single Page Application)

리액트 앱이 알아서 업데이트하도록 하여 빠른 속도로 이동하도록 한다. → 페이지의 전환이 빨라진다.(SPA로 만들면 페이지들의 이동이 빠르다.)

웹 페이지 먼저 바꾸고 로딩보여주면서 데이터 가져온다.(클라이언트에서 렌더링을 다룸)→ CSR(Client Side Rendering)

라우팅을 사용하는 이유는 리액트가 SPA이기 때문이다.

React Router 기본

먼저 안 사용하는 파일들을 삭제해서 정리한다. (icon.png같은 것들!)

페이지 라우팅을 하기 위해서는 클라이언트 렌더링을 도와주는 라이브러리를 이용해야한다. → React Router라는 라이브러리를 사용하면 된다.

사이트에 들어가서 코드를 복사해 오면 된다.

복사한 코드는 터미널에 입력하면 된다. 2023년 1월 28일 기준으로 코드는

"npm install react-router-dom localforage match-sorter sort-by"

그리고 확인하는 방법은 package.json에 들어가서 dependencies에 설치한 라이브러리가 있는지 확인하면 된다. 보통 “react-router-dom:버전” 이런식으로 구성되어 있다.

확인 후 npm start로 구동시키면 완료!

라우팅 기능 사용하기

라우팅 기능을 사용하려면 BrowerRouter 컴포넌트를 최상위 태그로 감싸주면 된다.

앱에서 단 하나의 라우터만 사용해야한다.

  • BrowerRouter : 브라우저 History API를 사용해 현재 위치의 URL을 저장해주는 역할이다.
  • Routes: 자식 Route들을 구성하고 있는 단위
  • Route:path를 통해 URL을 분기시킬 수 있다. 중첩해서 사용 가능(중첩 라우팅)

 

링크 이동하기

페이지를 갱신하지 않고 렌더링 방식으로 이동하려면 Link 컴포넌트를 사용하면 된다.

HTML 앵커 태그로 자동으로 변환해준다.

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

function Nav(){
	return(
		<div>
			<Link to={'/'}>Home</Link>
			<Link to={'/board'}>Board</Link>
			<Link to={'/profile'}>Profile</Link>
		</div>
	);
}
	
export default Nav;

 

React Router 응용

React Router Dom의 유용한 기능

REACT ROUTER V6

REACT에서 CSR기반의 페이지 라우팅을 할 수 있게 해주는 라이브러리

Path Variable

useParams

Query String

useSearchParams

Page Moving

useNavigate

 

Path Variable

'{ }'을 이용해서 변수명을 지정하고, PathVariable을 이용해서 지정된 이름의 변숫값을 얻을 수 있다. → 전달받은 파라미터들을 객체(’{}’)로 받는다.

리액트 라우터에서 콜론(:)과 useParams hook을 이용해 URL 피라미터를 받을 수 있다.

id는 해당 Path Parameter의 이름을 의미해 변수 이름을 임의로 지정할 수 있다.

(꼭 id가 아니여도 된다.)

ex) :product → Path Parameter = product

React에 있는 것이 아니라 React 라이브러리에 있으며 use가 들어간 사용자 정의 훅들을 ‘커스텀 훅’이라 한다. → 여러가지 커스텀 훅이 있는데 확인하려면 여기로

Path Variable은 특정한 자원에 접근하는 목적에 사용하는 것이 좋다.

ex) 아래 예제에서 Path Variable을 id로 받기로 약속했다.

import {useParams} from "react-router-dom";
const Diary => ()=>{
	const {id} => useParams();

	<Routes>
		<Route path=”/diary/:id” elements={<Diary />} />
	</Routes>
}

export default Diary;

그래서 diary components로 가서 const {id} ⇒ useParams();로 꺼내와야한다.

Query String

Path Variable같이 유사한 역할을 하고 웹 페이지에 데이터를 전달하는 가장 간단한 방법이다.

URL를 사용하면서 ?키워드 뒤에 name과 value를 엮어서 데이터를 전송할 수 있는 기법

ex) edit?id=10&mode=dark ⇒ Query String

사용하기 간편해서 굉장히 자주 사용한다!!

Query String은 정보가 많을 때 사용하기 좋다. → 페이지네이션,필터링할 때 유리함

*페이지네이션 : 콘텐츠를 여러 페이지로 나누고, 이전 혹은 다음 페이지로 넘어가거나 특정 페이지로 넘어갈 수 있는 일련의 링크를 페이지 상단이나 하단에 배치하는 방법이다. ex)구글 검색 사이트

Query String 사용 방법

다른 변수를 주고 싶으면 &를 사용하면 된다.

별도의 처리를 안해줘도 알아서 웹핑?이 된다.

라우팅에 영향을 끼치지 않기 때문에 <Link>에 따로 명시하지 않아도 된다.

useSearchParams hook을 사용해 값을 확인할 수 있다.

useSearchParams 메서드로 배열을 받아올 수 있는데 비구조화 할당을 통해 두 개의 프로퍼티들을 가져올 수 있다. (자유롭게 이름 지정 가능)

하지만 useSearchParams는 이름 변경하면 안된다.

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

const Edit = () => {
	const [serchParams,setSearchParams] => useSearchParams();
	
	const id= searchParams.get('id');
	//get를 통해 전달 받은 QuerySting들을 꺼내 쓸 수 있다.
	//searchParams는 Query String의 Key에 대한 value를 가져온다.

	const mode = searchParams.get('mode');

	return(
		<div>
			<h1>Edit</h1>
			<p>이곳은 일기 수정 페이지입니다.</p>
			<button onClick={()=> setSearchParams({who:"me"})} >QS바꾸기</button>
		//버튼을 누르면 setSearchParams가 searchParams를 변경해 ‘edit?whod=me’로 바뀐다.
		//setSearchParams는 useState처럼 searchParams를 변경할 수 있다.
		</div>
	);
};

export default Edit;

Page Moving

Link 대신 useNavigate()을 이용해 의도적으로 사이트를 이동할 수 있다.

useNavigate()를 통해 navigate라는 이름의 함수를 선언해주고 각 버튼을 클릭하면 해당 경로의 컴포넌트로 이동하게 된다.

navigate(-1)를 하면 뒤로 간다는 의미로 뒤로 가기 기능을 줄 수 있다.

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

const Edit = () => {
	const navigate = useNavigate();
	const [searchParams,setSearchParams] => useSearchParams();
	
	const id= searchParams.get('id');
	//get를 통해 전달 받은 QuerySting들을 꺼내 쓸 수 있다.
	//searchParams는 Query String의 Key에 대한 value를 가져온다.

	const mode = searchParams.get('mode');

	return(
		<div>
			<h1>Edit</h1>
			<p>이곳은 일기 수정 페이지입니다.</p>
			<button onClick={()=> setSearchParams({who:"me"})} >QS바꾸기</button>
			//버튼을 누르면 setSearchParams가 searchParams를 변경해 ‘edit?whod=me’로 바뀐다.
			//setSearchParams는 useState처럼 searchParams를 변경할 수 있다.

			<button onClick={()=>navigate("/home")}>Home으로 가기</button>
			//누르면 home으로 사이트를 이동할 수 있다.
			<button onClick={()=>navigate(-1)}>뒤로가기</button>
			//navigate(-1)로 하면 뒤로 가기가 가능하다.
		</div>
	);
};

export default Edit;
반응형