Routing 이란?
Routing은 기본적으로 네트워크에서 경로를 선택하는 프로세스를 의미한다.
쉽게 얘기하자면, 다양한 주소의 요청이 들어왔을 때 각각 맞는 콘텐츠로 이동시켜 주는 작업이라고 볼 수 있다.
(마치 우체국에서 편지를 집 주소에 맞게 배달하는 것처럼)
https://velog.velcdn.com/images/kandy1002/post/e6c487b8-4249-4d44-9eab-2468409d1f80/image.png
<React-Router를 사용하는 이유는 뭘까? >
-> SPA (Single Page Application) 사용자 경험 향상의 목적
그냥 a 태그를 사용하면 페이지 전체가 새로 로딩된다.
(이때 화면 깜빡임이 필수적으로 발생하기 때문에 사용자 경험을 떨어뜨리는 큰 요인이 된다.)
따라서 라우팅을 통해 부드러운 화면전환을 구사할 수 있다.
Router 종류
< HashRouter >
URL의 해쉬(#)값을 이용하는 라우터
다음과 같은 특징을 가진다.
주소에 해쉬(#)가 붙는다.
검색 엔진이 읽지 못한다.
별도의 서버 설정을 하지 않더라도 새로고침 시 오류가 발생하지 않는다. 이는 해시 라우터가 해쉬(#) 뒤의 값은 브라우저에서만 관리하고(라우팅하는 사실을 서버가 모름) 서버는 기본 url로 서버에 데이터를 요청하기 때문이다.
history API를 사용하지 않기 때문에 동적 페이지에 불리하다.
< BrowserRouter >
history API를 사용한다.
별도의 서버 설정이 없다면 새로고침 시 404에러가 발생한다.
서버에서는 기본 라우트 '/'정보만 저장되어 있고, 이외의 모든 하위 라우팅은 이 default 경로를 통해 이루어지기 때문에 이 경로를 제외하고는 서버에서 인식하지 못한다. 만일 필요하다면 해당 주소와 그에 맞는 페이지를 서버에 알려주어야 한다. 그런게 아니라면 일반적으로는 '/*'의 경로로 접근 시 서버에는 '/'로 리다이렉션 해주면 된다.
(404 Error -> index.html)
( 배포할 때 많이 에러가 나는 부분이므로 제대로 알고 있도록 하자 )
큰 프로젝트에 적합하다.
우리가 사용할 라우터도 이 BrowserRouter이다.
서버가 존재하고, SEO (Search Engine Optimization - 검색 엔진 최적화) 가 필요한 프로젝트라면 BrowserRouter를 사용하는 것이 좋고, 그 외에 개인적이거나 작은 단위의 프로젝트라면 HashRouter를 사용해도 괜찮다.
< React-Router-Dom >
React로 생성된 SPA 내부에서 페이지 이동이 가능하도록 만들어주는 라이브러리
< 설치하기 >
npm install react-router-dom
< 세팅하기 >
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
- BrowserRouter
history API를 활용해 history 객체를 생성한다.
history API는 내부적으로 stack 자료구조의 형태를 띄기 때문에 사용자가 방문한 url 기록들을 차곡차곡 쌓는 형태로 저장해둔다고 생각하면 된다.
라우팅을 진행할 컴포넌트 상위에 BrowserRouter 컴포넌트를 생성하고 감싸주어야 한다.
- Route
현재 브라우저의 location(window.href.location 정보를 가져온다) 상태에 따라 다른 element를 렌더링한다.
Route.element: 조건이 맞을 때 렌더링할 element,
의 형식으로 전달된다.
Route.path: 현재 path값이 url과 일치하는지 확인해 해당 url에 매칭된 element를 렌더링해준다.
- Routes (리액트 버전 5에서는 Switch컴포넌트로 쓰였음)
모든 Route의 상위 경로에 존재해야 하며, location 변경 시 하위에 있는 모든 Route를 조회해 현재 location과 맞는 Route를 찾아준다.
(리액트 6으로 업데이트 되면서 이전과 문법이 많이 달라졌다.)
누군가 우리 웹사이트의 "/" url에 있다면 우리는 Home 컴포넌트를 보여준다는 뜻이다.
추가로,
Detail 컴포넌트를 보여주기 위해 path 경로를 "/movie"로 가는 코드를 추가하면,
잘 나오는 것을 볼 수 있다!
HTMl 의 경우 < a > 의 태그를 이용하여 클릭할 경우 해당 링크를 가는 방법을 사용했지만 이 방법의 경우 화면 전체가 재실행 하게 된다. 하지만 리액트에서는 Link 컴포넌트를 사용하여 이를 해결할 수 있다.
< Link >
Link는 브라우저 새로고침 없이도 유저를 다른 페이지로 이동시켜주는 컴포넌트이다. -> 빠르게 반응하는 것 처럼 보임
자신이 Link를 달고 싶은 곳 어디든 사용 가능하다.
예를 들어 Movie Page에서 title에 링크를 달고싶다면 이렇게 가능하다. {title}를 클릭하면 새로고침 없이 "/movie" url 로 이동하게 된다.
< useParams >
import { useParams } from "react-router-dom";
주소 경로 내부에 특정 데이터를 넣어 전달하는 것을 말한다.
, (= url에 있는 값을 반환해주는 함수.)
(React Router에서 제공하는 함수)
