.png)
React를 이용할 때 또다른 유명한 library중 React-Router가 있다. React-Router는 React에서 CSR 기반의 page routing을 할 수 있게 해주는 라이브러리이다. 여기서 CSR은 뭐고, page routing은 뭘까?
아래에서 차근차근 살펴보자 -!
📄 Page Routing 가능하게 해주는 React Router
페이지 라우팅에 대해 정의하기 전에 먼저 Router, Routing의 뜻을 알고 가자.
🙋♀️ Router
데이터의 경로를 실시간으로 지정해주는 역할을 하는 무언가
🙋♀️ Route + -ing (Routing)
경로를 정해주는 행위 자체와 그런 과정들을 다 포함하여 일컫는 말
그렇다면 Page Routing은 무엇이라 정의할까?
🙋♀️ Page Routing
Page-Routing 이란 사용자의 page요청에 따라 웹 server가 그 page를 반환하는 행위 자체를 말한다.
이러한 "페이지 라우팅" 은 우리가 한 웹사이트를 이용을 하더라도 여러 다양한 page들을 받아볼 수 있게 한다.
흔한 웹사이트들을 들어가보면 page가 이동할 때마다 새로고침이 된다.
이는 여러 페이지로 구성되어있는 MPA(Multi Page Application)의 특징 중 하나이다. 페이지를 요청할때마다 서버로 접속하여 받아오기 때문에, 페이지가 매번 새로고침 되는 것이다.
🙋♀️ SPA (Single Page Application)
React에서는 'react-router'를 이용하여 MPA의 반대(?)인 SPA(Single Page Application) 구현이 가능하다.
SPA의 경우 서버에서 제공하는 페이지가 한 개이며, 로딩을 한 번 하고난 후에는 브라우저 내에서 나머지 페이지들을 정의하여 보여준다.
일단, 첫 번째 페이지를 받아온 후 다른 페이지로 이동할때는 서버에 새로운 페이지를 요청하는게 아니라, 새 페이지에서 필요한 데이터만 받아와서 주소에 따라 다른 뷰를 보여준다.(이를 Routing이라고 함)
🙋♀️ CSR (Client Side Rendering)
CSR 은 SPA을 구현하는 방식으로 보면 된다.
Client측에서 알아서 rendering 하는 방식인데, React-router는 이 CSR을 쉽게 해준다!
🚀 Page 이동하는 법
SPA도 react-router을 통해 원하는 page로 이동할 수 있다는 것을 배웠다. 구체적인 방법으로는 크게 4가지가 있다.
1. Link
가장 흔한 방법! 원하는 요소에 Link 적어주기!
ex)
import { Link } from "react-router-dom";
<Link to = {"/"}> Home </Link>2. Path Variable - useParams
useParams는 대표적인 custom hook이다.
🔖 custom hooks : react에서 제공해주는 것은 아니나 다른 라이브러리 등을 통해 이용가능한 hooks
사용 방법
- 매개변수를 받아와야 하는 Route 내의 path내에
/:을 통해 적어줄 것!
ex)<Route path="/diary/:id" element={<Diary />} /> - 해당 component에서 useParams를 이용하여 path variable을 꺼내온다.
ex)import { useParams } from "react-router-dom"
const {id} = useParams()
3. Query String - useSearchParams
이 방법은 name 과 value를 엮어서 전송할 수 있다는 특징이 있다.
웹 페이지에 데이터를 전달하는 가장 간단한 방법.
/edit?id=10&mode=dark 와 같이 생긴 형태!
사용 방법 (searchParams이용하여 query string 받아오기)
ex) Edit.js
주소창에 있는 /edit?id=10&mode=dark 에서 id 값과 mode 값을 가져온다고 가정.
import { useSearchParams } from "react-router-dom";
const Edit = () => {
const [searchParams, setSearchParams] = useSearchParams();
// query string 받아오기
const id = searchParams.get('id'); //10
const mode = searchParams.get('mode'); //dark
// searchParams 변경시키는 방법 - 주소창 주소 /?who=hyojeong으로 바뀜
return (<div>
<button onClick = {()=> setSearchParams({who :"hyojeong"}></button> </div>) }4. Page Moving - useNavigate
useNavigate는 Link없이도 원하는 path로 이동이 가능하다.
Link없이 의도적으로 page를 바꿔버릴 수 있다.
사용 방법
1. useNavigate()를 이용하여 페이지를 이동시켜주는 함수를 반환하여 변수에 담는다.
2. navigate()내에 원하는 path 적어준다!
ex)
import { useNavigate } from 'react-router-dom';
cont Edit = () => {
const navigate = useNavigate();
return (<div>
<button onClick = {()=>{navigate("/home");}}>HOME</button>
<button onClick = {()=>{navigate(-1);}}뒤로 가기</button>
</div>)참고한 사이트
출처 : https://ko.reactjs.org/docs/glossary.html#single-page-application
출처 : https://www.udemy.com/course/winterlood-react-basic/learn/lecture/
출처: https://codingmania.tistory.com/328 [개발자의 개발 블로그]
🍯 마무리
SPA랑 CSR이 항상 세트로 나와서 둘이 그래서 의미가 똑같다는 건가 하고 헷갈려서 찾아봤는데 SPA를 구현하게 하는 방식이 CSR인 걸로! 궁금증 해결-⭐️ 라우팅 배우고 나서부터 홈페이지 들어갈때마다 주소창을 유심히 보게된다. 뭔가 의미 찾아내는 거 재밌어(!!!) query string 배우고나서야 주소창에서 자주 떴던 ?list=sale 요런 것들 의미를 잘 알겠다. 희희
