What is ROUTING
ROUTING의 사전적 의미는 어떤 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 일련의 과정이다.
ROUTER의 사전적 의미는 데이터의 경로를 실시간으로 지정해주는 역하을 해주는 무언가
즉 라우팅이란 데이터의 경로를 정해주는 행위
MPA(멀티페이지어플리케이션)에서의 페이지 라우팅
웹사이트에 접속한다는 것은 브라우저를 통해서 웹서버에 경로를 요청하고, 해당 웹 문서를 받아보는 과정이라고 할 수 있다.
SPA(싱글페이지어플리케이션)에서의 페이지 라우팅
어떠한 페이지를 요청하더라도 index.html을 내보내준다.
또한 서버와 통신 없이 브라우적 알아서 렌더링을 해준다. -> 페이지 전환이 빠르다
데이터가 필요한 페이지일 경우 해당 필요한 데이터만 서버와 통신해서 렌더링 하게 해준다.
Reacr Router Dom의 유용한 기능에 대해 알아보자
React에서 CSR기반의 페이지 라우팅을 할 수 있게 해주는 라이브러리이다.
Path Variable (feat. useParams)
URL의 일부를 동적으로 처리하기 위해 사용된다.
// 라우팅하는 상위 컴포넌트 파일
<Route path="동적으로원하는경로/:동적인 값"/>
// 해당 동적인 값을 설정하는 컴포넌트 파일
import { useParams } from "react-router"
const 컴포넌트이름 =() => {
const { 동적인값 } = useParams();
console.log(동적인값);
};
위와 같이 코드를 구성하게 되면 해당 프로젝트의 url에서
/해당폴더이름/동적인값 에 들어가게되면
콘솔 창에 해당 동적인 값을 들고 올 수 있게 된다.
--> 매개변수를 기반으로 서로 다른 컴포넌트를 렌더링할 수 있게 된다.
Query String (feat. useSearchParams)
페이지에 데이터를 전달하는 가장 간단한 방법이다.
ex) www.아무페이지이름.com/?id=10&
이렇게 되어져 있는데 path variable과 다른점은 라우팅이 자동으로 래핑이 되어져있다는 점이다.
? 뒤에 있는 경로들은 페이지 라우팅에 영향을 주지 않는다는 점
해당 데이터를 수정하는 페이지를 만든다고 했을 때 그 특정 동적인 값을 끌고 와야하는 상황에서
query string을 통해 라우팅을 설정해보자
ex-url)www.페이지이름.com/페이지이름?id=10
import { useSearchParams } from 'react-router-dom';
const 컴포넌트이름 = () => {
const [searchParams, setSearchParams] = useSearchParams();
const id = searchParams.get("id");
console.log("id"); // 10
};이렇게 사용을 해서 페이지에 어떠한 값을 전달할 수 있게끔 도와준다.
그럼 이제 이 동적인 값을 변경을 해보자
useState()와 같이 생긴 useSearchParams()를 통해 동적인 값 변경하기
<button onClick={setSearchParams({ 이걸로: '바굽니다' })}>QS</button>그럼 이제 url이 ?이걸로=바꿉니다로 변경되는것을 볼 수 있다.
Page Moving (feat. useNavigate)
useNavigate() => 로케이션을 변경하는 값을 반환한다
const navigate = useNavigate();
if(userID == '') {
navigate('/로그인이 없는 경우 보내줄 페이지 경로')
}Link컴포넌트와 달리 특정 상황에서 이런식으로 페이지를 강제로 보낼 수 있게금 할 수 있을 것 같다
