React-Router-Dom
📎 React Router
- 페이지 이동이라는 기능은 React에서 Router를 통해 처리할 수 있다.
react-router-dom을 사용하지 않은 라우팅의 구현
import React, {useState} from 'react'
import Home from "./Home";
import About from "./About";
import NotFound from "./NotFound";
function App(){
const [comp, setComp] = useState(Home)
return(
<>
<header>
<button onClick={() => setComp(Home)}>Home</button>
<button onClick={() => setComp(About)}>About</button>
<button onClikc={() => setComp(NotFound)}>Users</button>
</header>
<hr />
<main children={comp} />
</>
);
}
export default App;위와 같이 <header> 내에 특정 메뉴 버튼을 클릭하면 그에 상응하는 컴포넌트 comp 상태가 바뀌도록 해놓으면 버튼 클릭시 화면에서 <main /> 부분이 업데이트 되어 특정 버튼에 해당하는 화면으로 전환 되어진다.
❗️문제점
- 특정 페이지 즐겨찾기 등록불가, 화면이 전환 되어도 브라우저 주소창의 url은 고정되어 있기 때문이다.
- 뒤로가기 버튼을 클릭하면 해당 앱 내에서 이전 페이지로 이동하는 것이 아니라 그 전에 서핑하던 다른 웹사이트로 이동해버린다.
- 새로고침 버튼을 클릭하면 사용중이던 컴포넌트가 아닌 최초에 렌더링 되었던 사이트 메인으로 이동한다.
- SEO(검색 엔진 최적화)측면에서도 일반 웹사이트들과 차이가 있어서 검색 엔진에 의해 원치 않는 방식으로 색인이 될 수 있다.
📎 Routing
- 요청 URL에 따라 분기를 해서 출력을 하는 것
→ 간단하게 생각 하면 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 전송. - 리액트에서는 라우팅 관련 라이브러리가 많이 있는데, 가장 많이 사용하는게 리액트 라우터이다.
📎 Router
- 사용자가 입력한 주소를 감지하는 역할을 하며, 여러 환경에서 동작할 수 있도록 여러 종류의 라우터 컴포넌트를 제공한다.
- 가장 많이 사용하는 라우터 컴포넌트는
BrowserRouter와HashRouter이다. - web용과 Native용이 존재한다.
✨BrowerRouter
HTML5를 지원하는 브라우저의 주소를 감지 한다.
<BrowserRouter>태그로 컴포넌트 감싸주기
✨Routes
- 여러
Routes를 감싸서 그 중 규칙이 일치하는 라우트 단 하나만 렌더링 시켜주는 역할을 한다. - React Router를 사용하는 어플리케이션은 위와 같은 구조를 가지게 된다. 실제 프로젝트에서는 위 컴포넌트들이 여러 파일에 걸쳐서 흩어져 있을 수도 있다.
✨Route
- 현재 주소창의 경로와 매치될 경우 보여줄 컴포넌트를 지정하는데 사용된다.
- path prop을 통해서 매치시킬 경로를 지정하고 component prop을 통해서 매치되었을 때 보여줄 컴포넌트를 할당한다.
<Route path=URL element={출력하고자 하는 컴포넌트} />
<Route path="/about" component={About}>현재 주소창의 경로가 /about 인경우 About 이라는 컴포넌트를 보여준다. 일반적으로 현재 주소창의 URL 경로에 따라 특정 컨텐츠를 보여주거나 숨기기 위해서 사용될 수 있다.
여러 라우팅을 매칭하고 싶은 경우 URL 뒤에 *을 사용하면 된다.
<Route path="/page1/*" element={<Page1 />} />
<Route path="/page2/*" element={<Page2 />} />
<Route path="/*" element={<NotFound />} />✨Link
- html의
<a>태그와 유사한 기능, to prop을 통해서 이동할 경로를 지정해준다. - 웹 페이지에서는 원래 링크를 보여줄 때 a태그를 사용한다. 하지만 a태그는 클릭시 페이지를 새로 불러오기 때문에 사용하지 않는다.
※ HTMLtarget속성으로 새로운 페이지 생성 막을 수 있다. - Link 컴포넌트는 생김새는 a태그랑 같지만 HTML5 History API를 통해 브라우저 주소의 경로를 바꾸는 기능이 내장되어 있다.
- 문법 :
<Link to=URL>링크명</Link>
import { Link } from "react-router-dom";
<Link to="/about">About</Link>;위의 코드는 브라우저에서 클릭이 가능한 about으로 렌더링되고, about을 클릭하면 주소창의 경로가 <도메인 네임> /about 으로 갱신된다.
Link 컴포넌트를 이용해서 state 보내기 - v5, v6
- React Router v5
<Link to = {{pathname:"/home",state:state}} /> - React Router v6
<Link to="/home" state={state} />
✨useParams
리액트에서 라우터 사용시 파라미터 정보를 가져와 활용하고 싶다면 useParams라는 훅을 사용하면 된다.
URL/user/1
- user/1는
pathname
→ useLocation() 사용- 1은
parameter
→ useParams() 사용
Sample 1
//현재 컴포넌트 라우터 경로 : URL/user/1
import React from "react";
import {useParams} from 'react-router-dom';
const test = ()=>{
let { params } = useParams();
return(
<div className="test">
<p>현재 페이지의 파라미터는 {params} 입니다.</p>
</div>
)
}
export default test→ URL/user/1의 parameter가 1이므로 변수 params는 1이 된다.
✨useLocation
현재 URL 정보를 가져올 수 있다.
import { useLocation } from "react-router-dom"; //import 한다.
export default function Location(){
const a = useLocation(); //useLocation 정보를 담는다.
console.log(a);
return(
<>
...
</>
)
}콘솔 결과값
location 정보
hash
#문자열 형태의 값, segment라고 부르기도 하는데 하나의 페이지 내에서 이동하기 위해서 사용, 예전의 구형 브라우저에서 클라이언트 라우팅을 할 때 사용, jquery mobile 이 hash를 사용, jquery(Cross Browsing 라이브러리) mobile 이 hash를 사용
Jquery state : 페이지 이동시 임의로 넣을 수 있는 상태 값 -❗️좀 더 알아보기
key
location 객체의 고유값, 초기값은 default 페이지가 변경될 때 마다 고유의 값이 생성된다.
pathname
query String을 제외한 경로 및 현재 주소 경로
search
? 를 포함한 query String
state
페이지로 이동시 임의로 넣을 수 있는 상태 값
📌 useLocation × TypeScript
※ react-router-dom v6부터 제네릭을 지원하지 않는다.
//Coins component
<Link to={`/${coin.id}`} state={{ name: coin.name }}></Link>;
//state안에 있는 객체값 url에 넘겨주기.
//Coin component
interface LoactionParams {
state: {
name: string;
};
}
const state = useLocation() as LocationParams;📌 useLocation × Link state 속성의 문제점
새탭으로 URL을 입력하여 화면을 열어보면 에러가 발생 할 것이다.
에러가 나는 이유는 새 탭으로 화면을 열 경우 해당 URL의 state값이 정의 되지 않아서다.
state가 생성되려면 Home 화면을 먼저 열어야 한다.
//coins component
import { Link } from "react-router-dom";
function Coins() {
return (
<Link to={`/${coin.id}`} state={{ name: coin.name }}></Link>
// to로 설정된 Url로 state를 보낸다.
);
}
export default Coins;//coin component
import { useState } from "react";
import { useLocation } from "react-router-dom";
interface LocationParams {
state: {
name: string;
};
}
function Coin() {
const { state } = useLocation() as LocationParams;
return (
<>
<div>{state.name}</div>
//사용❌, TypeError:Cannot read properties of undefined(reading name)
<div>{state?.name || "Loading..."}</div>
// 해결 방법: 새탭에서 상세화면 URL을 입력하여 화면을 들어오면 Loading화면을
보게 만들어 주었다. // 결론 : Home화면을 통해서 들어온다면, Link로 해당 URL로
이동하기 때문에 Home에서 가져온 state값을 볼 수 있을 것이다.
</>
);
}
export default Coin;URL Parameter & Query String
📌URL Parameter
URL의 마지막이나 중간에 데이터를 전송하는 것
/profiles/adam → adam 부분을 데이터처럼 변경하면서 사용할 수 있는데 URL Parameter라고 한다.
dynamic URL parameter 처리시 ':'를 붙여 준다.
<Route path ="/profiles/:이름" element={<Day />}></Route>
📌Query String
URL 뒤에 ? 를 추가하고 이름 과 값을 전달할 때 사용
profiles?name=adam&email=itstudy@kakao.com
- 근본적으로 Query String은 Client 가 Server에게 전달하는 데이터이다.
- react 측면에서는 Query String을 읽는 것 보다는 만드는 것이 중요
- 만드는 것은 JavaScript 문법을 이용
- Query String은 반드시 인코딩을 해서 만들어야 한다.🔥🔥🔥
- useLocation을 이용해서 location 객체를 리턴 받아 사용
- react-router-dom 에서도 useSearchParams 라는 Hook으로 읽을 수 있다.
- qs 라이브러리를 이용하면 query string을 객체로 변환할 수 있다.(qs를 많이 사용한다.)🔥
Query String 예시)
Localhost:3001/words?day=1을 하면 1일치에 해당 하는 단어를 가져오는 것도 가능하다.
Sub Routing
Router 내부에 다시 Router를 만드는 것
공통 레이아웃
1) 만드는 방법
- 공통된 레이아웃을 위한 컴포넌트를 만들고 각 페이지 컴포넌트에서 직접 출력하는 방법
- 중첩된 라우트 와
Outlet을 이용해서 구현 - 한 번만 설정하면 된다.
라우팅에서의 index 속성
index라는 porps가 존재하는데 이 props가 "/" 이다 (보통 index를 적어준다.)🔥
<Route path='/' element={<Home />}
<Route index element={<Home />}>
Router 의 부가 기능
1) useNavigate
- Link 컴포넌트를 이용하지 않고 다른 페이지로 이동하고자 할 때 사용하는 Hook
- Redirect 하고자 하는 경우 사용🔥🔥🔥
- useNavigate Hook이 리턴한 함수를 호출해서 처리할 수 있는데 매개변수로는 정수나 문자열 하나 그리고 옵션을 설정한다.
- 첫번째 매개변수가 숫자이면 숫자 만큼 앞으로 이동한다.
- 문자열이면 이동할 URL이 된다.
- 두번째 매개변수로 객체를 만들어서 replace 옵션에 true를 설정하면 현재 페이지에 대한 기록을 남가지 않는다.
Web에서의 페이지 이동
Forwarding
- 요청(request) 객체를 유지하면서 이동, 새로고침을 하면 요청이 다시 이루어지는데 이 경우는 서버에서 처리하는 로직이 있으면 다시 로직을 수행한다.
- 새로 고침을 했을 때 작업을 다시 수행하고자 하는 경우 사용 - 조회에 이용
Redirect
- 요청 객체를 소멸시키면서 이동, 새로고침을 하면 요청이 다시 이루어지는 것이 아니고 현재 보여지고 있는 결과를 다시 출력한다.
- 작업을 다시 수행하지 않아야 하는 경우 사용 - 삽입, 삭제, 갱신에 이용
NavLink
- Link와 거의 유사한데 현재 경로와 Link에서 사용하는 경로가 일치하는 경우 특정 스타일을 적용할 수 있도록 해주는 컴포넌트
Navigate
- 화면에 보여지는 순간 다른 페이지로 이동하고자 할 때 사용하는 컴포넌트🔥🔥
404에러(클라이언트의 URL이 잘못된 경우)에 대한 대응
- Route를 만들 때 path를 "*"로 설정하면 모든 경우에 반응하는데 이 컴포넌트는 Route의 맨 아래에 추가하면 앞의 path를 확인 한 후 앞에 일치하는 path가 없으면 자신에게 설정된 컴포넌트를 출력
