CSR
1. React Router Dom 의 유용한 기능
React Router V6 : React 에서 CSR 기반의 페이지 라우팅을 할 수 있게 해주는 라이브러리
- Path Variable
useParams
- Query String
useSearchParams
- Page Moving
useNavigate
Diary 페이지
경로 : /diary
특징 : 어떤 일기를 보여줘야 할 지 전달 받아야 함
예 : /diary/1 -> 1번 일기
1) Path Variable : URL 에 변수를 담아서 전달하는 방법
- App.js
...
<Routes>
<Route path='/' element={<Home />} />
<Route path='/new' element={<New />} />
<Route path='/edit' element={<Edit />} />
<Route path='/diary/:id' element={<Diary />} />
<Route path='/diary' element={<Diary />} />
</Routes>
...
이렇게 콜론을 사용하여 id 라는 이름으로 뒤에 있는 값을 전달하겠다고 설정한다. 이후 http://localhost:3000/diary/1 경로로 접속하면 Diary 페이지에 접속되는 것을 확인할 수 있다.
http://localhost:3000/diary 경로로 다시 접속하면 아무것도 안 나오게 된다. 이런 경우 별도로 '/diary' 경로를 추가하여 처리해야 한다. 하지만 일기의 id 가 존재하지 않는 경우가 없으므로 별도 추가 처리는 하지 않는다.
전달한 '1' 이라는 Path Variable 을 사용해본다.
- Diary.js
import { useParams } from "react-router-dom";
const Diary = () => {
// 사용자 정의 Hooks (커스텀 Hooks)
const { id } = useParams(); // 전달받아 들어오는 Path Variable 들을 모아서 객체로 반환
console.log(id);
return (
<div>
<h1>Diary</h1>
<p>이곳은 일기 상세 페이지 입니다.</p>
</div>
);
};
export default Diary;
사용자 정의 Hooks 인 useParams 을 이용하여 http://localhost:3000/diary/1 경로로 전달받는 '1' 값을 받아낸다.
2) Query String : 경로에 name 과 value 를 엮어서 데이터를 전송할 수 있는 기법
Query : 웹 페이지에 데이터를 전달하는 가장 간단한 방법
예시)
/edit?id=10&mode=dark
=> Query String
http://localhost:3000/edit?id=10&mode=dark 경로로 이동하면 Edit 페이지에 잘 이동되는데, 이렇게 Query String 으로 전달하면 별도의 처리를 하지 않아도 페이지가 잘 나온다. ? (물음표) 뒤의 경로들은 페이지 라우팅하는 경로에 영향을 주지 않는다.
Query String 을 Edit 컴포넌트에서 꺼내서 사용해본다.
- Edit.js
import { useSearchParams } from "react-router-dom";
const Edit = () => {
// 1번째 인덱스 : Query String 꺼내 쓰는 용도
// 2번째 인덱스 : searchParams 를 변경시킨다. 실시간으로 Query String 을 바꿀 수 있다.
const [searchParams, setSearchParams] = useSearchParams();
const id = searchParams.get('id');
console.log('id : ', id);
const mode = searchParams.get('mode');
console.log('mode : ', mode);
return (
<div>
<h1>Edit</h1>
<p>이곳은 일기 수정 페이지 입니다.</p>
<button onClick={() => setSearchParams({ who: 'test' })}>
QS 바꾸기
</button>
</div>
);
};
export default Edit;
useSearchParams 를 이용하여 http://localhost:3000/edit?id=10&mode=dark 경로로 전달한 값을 받아내고, 또 실시간으로 변경해 보았다.
3) Page Moving : 페이지 이동
사용 예시) 로그인 안된 사용자를 강제로 로그인 페이지에 보낼 때
- Edit.js
import { useNavigate, useSearchParams } from "react-router-dom";
const Edit = () => {
// 1번째 인덱스 : Query String 꺼내 쓰는 용도
// 2번째 인덱스 : searchParams 를 변경시킨다. 실시간으로 Query String 을 바꿀 수 있다.
const [searchParams, setSearchParams] = useSearchParams();
const id = searchParams.get('id');
console.log('id : ', id);
const mode = searchParams.get('mode');
console.log('mode : ', mode);
// 페이지 이동 하는 함수를 반환. 매개변수로 경로 설정.
const navigate = useNavigate();
return (
<div>
<h1>Edit</h1>
<p>이곳은 일기 수정 페이지 입니다.</p>
<button onClick={() => setSearchParams({ who: 'test' })}>
QS 바꾸기
</button>
<button
onClick={() => {
navigate('/');
}}
>
HOME 으로 가기
</button>
<button
onClick={() => {
navigate(-1); // 뒤로 1번 가면 -1
}}
>
뒤로 가기
</button>
</div>
);
};
export default Edit;
useNavigate 기능은 링크 태그를 클릭하지 않았을 때도 의도적으로 페이지를 이동시킬 수 있다.

참고강의 : https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%EB%A6%AC%EC%95%A1%ED%8A%B8#
한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 강의 - 인프런
개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응용은 길게 17시간 분량의 All-in-one 강의!, 리액트, 한 강의로 끝장낼 수 있어요.
www.inflearn.com
'강의 실습 > 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지' 카테고리의 다른 글
프로젝트 기초 공사 2 (0) | 2024.02.03 |
---|---|
프로젝트 기초 공사 1 (0) | 2024.02.03 |
페이지 라우팅 1 - React Router 기본 (3) | 2024.01.30 |
페이지 라우팅 0 - React SPA & CSR (2) | 2024.01.29 |
컴포넌트 트리에 데이터 공급하기 - Context (4) | 2024.01.28 |
댓글