라우팅
- 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것
- 여러 페이지로 구성된 웹 애플리케이션을 만들 때 페이지 별로 컴포넌트들을 분리해가면서 프로젝트를 관리하기 위해 필요한 것
리액트에서 라우트 시스템을 구축하는 방법
1. 리액트 라우터
- 가장 많이 사용되는 라이브러리
- 컴포넌트 기반으로 라우팅 시스템을 설정
2. Next.js
- 리액트 프로젝트의 프레임워크
- 파일 경로 기반으로 작동
- 리액트 라우터의 대안으로 많이 사용됨
멀티 페이지 애플리케이션 (MPA)
- 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아오고, 페이지를 로딩할 때 마다 서버에서 CSS, JS, 이미지 파일 등의 리소스를 전달받아 브라우저 화면에 보여줌
- 사용자 인터랙션이 별로 없는 정적인 페이지들은 기존의 방식이 적합
- but 사용자 인터랙션이 많고 다양한 정보를 제공하는 모던 웹 애플리케이션은 적합하지 않음
- 새로운 페이지를 보여줘야할 때마다 서버 측에서 모든 준비를 한다면 그만큼 서버의 자원을 사용하는 것이고 트래픽도 더 많이 나오기 때문
→ 그래서 리액트 같은 라이브러리를 사용해 뷰 렌더링을 사용자의 브라우저가 담당하도록 함
- 사용자와의 인터랙션이 발생하면 필요한 부분만 자바스크립트를 사용해 업데이트하는 방식을 사용
- 만약 새로운 데이터가 필요하다면 서버 API를 호출해 필요한 데이터만 새로 불러와 애플리케이션에서 사용할 수 있게 됨
싱글 페이지 애플리케이션 (SPA)
- 하나의 페이지로 이루어진 애플리케이션
- html은 한번만 받아와 웹 애플리케이션을 실행시킨 후 필요한 데이터만 받아와 화면에 업데이트 하는 것
- 기술적으로는 한 페이지만 존재하지만, 사용자가 경험하기에는 여러 페이지가 존재하는 것처럼 느껴짐
리액트 라우터 사용법
1. 프로젝트에 라우터 적용
- 라우터 적용은 index.js에서 BrowserRouter라는 컴포넌트를 사용하여 구현
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom'; // * BrowserRouter 불러오기
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
// * App 을 BrowserRouter 로 감싸기
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
[Route 컴포넌트 사용 방식]
<Route path="주소규칙" component={보여주고싶은 컴포넌트}>
// src/App.js
import React from 'react';
import { Routes, Route } from 'react-router-dom';
import About from './About';
import Home from './Home';
const App = () => {
return (
<div>
<Routes>
<Route path="/*" component={Home} />
<Route path="/about" component={About} />
<Routes>
</div>
);
};
export default App;
- exact={true}는 경로가 완벽히 똑같을 때만 컴포넌트를 보여줌
- v6부터는 exact 없이 있는 url 형식으로 구성하기 위해서는 * 를 사용하도록 권고
리액트 라우터에서는 a태그를 사용하면 안되는 이유
: a태그를 클릭하여 페이지를 이동하게되면 브라우저에서는 페이지를 새로 불러오게 됨
2. Link 태그
<Link to = "경로">링크 이름 </Link>
// src/pages/Home.js
import { Link } from 'react-router-dom';
const Home = () => {
return (
<div>
<h1>홈</h1>
<p>가장 먼저 보여지는 페이지입니다.</p>
<Link to = "/about"> 소개 </Link>
</div>
);
};
export default Home;
파라미터와 쿼리스트링
- 파라미터 : 특정 id나 이름을 가지고 조회를 할 때 사용
- 쿼리 : 어떤 키워드를 검색하거나 요청할 때 필요한 옵션을 전달 할 때 사용
파라미터: /profiles/velopert
쿼리: /about?details=true
URL Params : useParams()
url 파라미터를 통해서 여러개의 페이지를 생성하고 싶을때, useParams()를 사용할수 있다.
useParams() : 어떤 페이지에 어떤 데이터가 들어갈지를 정해줌
사용 방법
1) 라우터 설치
npm install react-router-dom
2) useParams를 import 한다
3) useParams 정보를 하나의 변수에 저장
3) 파라미터 값 사용
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;
ex) /test/1 은 파라미터가 1이므로, 현재 페이지는 파라미터가 1입니다.라고 출력된다.
( 또 다른 예시 참고)
https://react.vlpt.us/react-router/02-params-and-query.html
2. 파라미터와 쿼리 · GitBook
2. 파라미터와 쿼리 페이지 주소를 정의 할 때, 우리는 유동적인 값을 전달해야 할 때도 있습니다. 이는 파라미터와 쿼리로 나뉘어질 수 있는데요: 파라미터: /profiles/velopert 쿼리: /about?details=true
react.vlpt.us
쿼리스트링 : useLocation(), useSearchParams()
- url에서 물음표 다음으로 오는 것들을 의미
- 요청하고자 하는 URL에 부가적인 정보를 포함하고 싶을 때 사용
- 상품 종류가 1000개라면 '상품 리스트 보여줘' 가 아닌 '상품 리스트를 최신순으로 상위 10개만 보여줘'
useLocation
import { useLocation } from "react-router-dom";
const List = () => {
const location = useLocation();
return (
<section>
<h1>This is List Page</h1>
<p>
쿼리 스트링: <b>{location.search}</b>
</p>
</section>
);
};
export default List;
?를 지우고, &를 분리한 뒤 key와 value를 파싱하는 별도의 작업이 필요
→ 원하는 값을 가져올 수 있게 useSearchParams를 사용
useSearchParams
const [searchParams, setSearchParams] = useSearchParams();
자주 사용하는 메서드
- 값을 읽어오는 메서드
- searchParams.get(key) - 특정한 key의 value를 가져오는 메서드, 해당 key 의 value 가 두개라면 제일 먼저 나온 value 만 리턴
- searchParams.getAll(key) - 특정 key 에 해당하는 모든 value 를 가져오는 메서드
- searchParams.toString() - 쿼리 스트링을 string 형태로 리턴
- 값을 변경하는 메서드
- searchParams.set(key, value) - 인자로 전달한 key 값을 value 로 설정, 기존에 값이 존재했다면 그 값은 삭제됨
- searchParams.append(key, value) - 기존 값을 변경하거나 삭제하지 않고 추가하는 방식
- searchParams 을 변경하는 메서드로 값을 변경해도 실제 url 의 쿼리 스트링은 변경되지 않습니다.
- 이를 변경하려면 setSearchParams 에 searchParams 를 인자로 전달해야 합니다.
import { useSearchParams } from 'react-router-dom';
const List = () => {
const [searchParams, setSearchParams] = useSearchParams();
// set 메서드를 사용해 sort 라는 키에 clear 라는 밸류를 설정한 후 현재 url 의 쿼리 스트링을 변경
const setSortParams = () => {
searchParams.set('sort', 'clear');
setSearchParams(searchParams);
};
// append 메서드를 사용하면 기존 값을 유지하며 sort 라는 키에 hello-world 라는 밸류를 추가할 수 있습니다.
const appendSortParams = () => {
searchParams.append('sort', 'hello-world');
setSearchParams(searchParams);
};
(ex) 페이지네이션 예시
리액트 기초, 쿼리 스트링, useSearchParams
위코드에서 공부하며 정리한 내용입니다.쿼리 스트링은 URL 의 한 부분으로, 요청하는 URL 에 부가정보를 포함할 때 사용합니다. 기존 URL 은 단순한 형태의 요청과 응답을 주고 받았지만 쿼리 스
velog.io
중첩된 라우트
현재 라우트 위치에 더해 준다
<Routes>
<Route path="/member" element = {<member/>} >
<Route path=":memberId" element={<memberInfo/>} /> <!-- /member/:memberId -->
</Route>
</Routes>
{/* Member */}
<div>
<header>Member</header>
<Outlet /> <!-- MemberInfo의 component가 Outlet의 위치에 위치하게 된다. -->
</div>
- member 라우트 하위에 :memberId 가 포함된 Route를 추가하면 중첩 라우팅이 됨
- /member/yeeun
- <member/>와 <memberInfo />를 다 보여줌
- Outlet : <member/>안에 <memberInfo />를 표현하는데 그 때 어디에 표현할지 입력해줌
→ 공통적으로 보여줘야 하는 레이아웃이 존재할때 사용하면 유용함.
부가 기능
1. useNavigate
Link 컴포넌트를 사용하지 않고 다른 페이지로 이동해야 하는 상황에서 사용하는 Hook
const naviagte= useNavigate();
// 이전 페이지로 이동
const goBack = () => {
navigate(-1);
}
// articles 경로로 이동
const goArticles = () => {
navigate('/articles');
}
2. NavLink
- 링크에서 사용하는 경로가 현재 라우트의 경로와 일치하는 경우 특정 스타일 또는 CSS 클래스를 적용하는 컴포넌트
- Link에 스타일을 넣어줄수 있는 Link
import { NavLink } from "react-router-dom";
// style 속성으로 스타일 적용할 때
<NavLink to="경로" style={({isActive}) => ({
css속성: isActive ? '활성화 되었을 때 스타일' : '비활성화 스타일',
...
})}>
내용
</NavLink>
// className 속성으로 스타일 적용할 때
<NavLink to="경로" className={({isActive}) => {
return isActive ? '클래스명' : '';
}}>
내용
</NavLink>
- 이 컴포넌트의 style콰 className은 { isActive : boolean }을 파라미터로 전달받는 함수 타입의 값을 전달
- 현재 보고 있는 게시글의 링크에 css가 적용됨
3. NotFound 페이지 (404 page)
<Route path = "*" element={<NotFound />} />
- *(wildcard)는 일치하는 라우터가 없다면 이 라우트가 화면에 나타남
4. Navigate 컴포넌트
- 컴포넌트를 화면에 보여주는 순간 다른 페이지로 이동하고 싶을 때 사용
- 페이지 리다이렉트하고 싶을 때 사용
- (ex) 사용자의 로그인이 필요한 페이지인데 로그인을 안했다면 로그인 페이지를 보여줌
// src/pages/Login.js
const Login = () => {
return <div> 로그인 </div>;
};
export default Login;
// src/pages/Mypage.js
import {Navigate} from 'react-router-dom';
const MyPage = () => {
const isLoggedIn = false;
if(!isLoggedIn) {
return <Navigate to = "/login" replace = {true} />;
}
return <div>마이페이지</div>;
}
export default MyPage;
'React' 카테고리의 다른 글
[React] 리덕스 라이브러리 (0) | 2023.04.05 |
---|---|
[React] Context API (0) | 2023.04.05 |
[React] immer를 사용해 불변성 유지 (0) | 2023.03.29 |
[React] 컴포넌트 스타일링 (0) | 2023.03.23 |
[React] Hooks (0) | 2023.03.23 |