![[React] 일기장 프로젝트 0. 페이지 라우팅](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FzsKXx%2FbtsbT3ewE2u%2FAAAAAAAAAAAAAAAAAAAAANsGLz-y1auvHzhpP1NW2tyFr4nqzgTWxDoA5xvZstpp%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3DPfT7OJVd0K44xztDaCfx%252BhugWYE%253D)
이 블로그는 유데미 '한입 크기로 잘라먹는 리액트' 강의를 듣고 복습하고자 작성되었습니다!
목차
1. 페이지 라우팅이란
일기장 프로젝트를 시작하면서 가장 먼저 진행한 것은 페이지 라우팅이었습니다.
먼저 라우팅이란, 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 과정입니다.
그리고 페이지 라우팅이란,
서버에 특정 페이지를 달라고 요청(request) 해서, 서버가 알맞은 페이지를 제공하도록 하는 과정을 말하는 것입니다.
즉, 서버로부터 페이지를 요청하고 받을 경로를 만드는 것입니다.
보통 MPA(Multipage Application), 즉 html 페이지가 여러 개인 방식에서는,
서버가 여러 페이지를 준비했다가 요청이 들어오면 거기 쓰인 경로에 따라 적절한 페이지를 골라줍니다.
대신 다른 페이지로 이동할 때마다 페이지가 새로고침됩니다.
하지만 리액트는 SPA(Singlepage Application)로, 총 페이지가 한 개입니다.
사이트에 들어가면 무조건 index.html을 반환하고, 대신 react app 전체를 통째로 던져줍니다.
예를들어 우리가 react로 만든 일기장에서 일기를 쓰고 업로드 버튼을 누르면,
페이지가 바뀌는 것이 아니라 react app이 index.html 자체를 업데이트 시키게 됩니다.
페이지가 바뀔 때마다 서버에게 요청하고, 응답받을 필요가 없는 것입니다.
이 덕분에 리액트를 사용하면 시간을 크게 단축시킬 수 있습니다.
이렇게 서버의 데이터가 필요할 경우, 서버에서 페이지 전체가 아니라 해당 데이터만 받아와도 된다는 것입니다.
이를 CSR(Client Side Rendering)이라고 하는데,
데이터만 서버에서 받아오고 화면은 클라이언트가 알아서 렌더링한다는 것을 의미합니다.
종합적으로, 리액트는 SPA + CSR 방식이라고 할 수 있겠습니다.
2. React Router 설치
그럼 직접 React로 페이지 라우팅을 해보겠습니다.
먼저, React Router 라이브러리를 설치해봅시다.
1. 아래의 명령어 입력
npm install react-router-dom@6
여기서 @6는 버전을 말하는 것으로, @6버전이 최신이라서 설치하였습니다.
React Router 홈페이지에 접속해 Tutorial을 누르면, 자세한 정보를 알 수 있습니다.
2. package.json에서 제대로 설치되었는지 확인
"react-router-dom": "^6.9.0",react-router-dom이 생기면 잘 설치된 것입니다.
3. React Router 사용
그럼 이제 React Router를 사용해봅시다.
1. App 컴포넌트에 임포트
import { BrowserRouter, Route, Routes } from 'react-router-dom';2. App에서 리턴문 감싸기
return (
<BrowserRouter>
<div className='App'>
<h2>App.js</h2>
<Routes>
<Route path='/' element={<Home />} />
<Route path='/new' element={<New />} />
<Route path='/edit' element={<Edit />} />
<Route path='/diary' element={<Diary />} />
</Routes>
</div>
</BrowserRouter>
);먼저 BrowserRouter로 전체 태그들을 감싸주고,
실제로 화면이 바뀔 부분은 Routes 태그로 감쌉니다.
그 후 url path에 따라 바뀔 컴포넌트를 Route 태그에 위와같이 넣어 매핑합니다.
위의 코드를 예로 들면,
주소창에서 localhost:3000 만 쳤을 때 h2와 Home 컴포넌트가 뜨고,
localhost:3000/new를 쳤을 때 h2와 New 컴포넌트가 뜨게 됩니다.
3. 컴포넌트를 이용한 페이지 이동 구현
원래 html에서는 페이지 이동을 a 태그로 구현했습니다.
<a href={"/new"}>이동</a>이렇게, 원래 html에서 하듯이 하면 서버에서 새로 페이지를 불러오는 꼴이 돼버립니다.
SPA가 아니게 되어버리는 것입니다,,
그래서 우리는, 대신 Link를 임포트해 a 태그 대신 사용할 것입니다.
RouteTest.js라는 새 파일을 만들어서, link를 사용해보겠습니다.
import { Link } from 'react-router-dom';
const RouteTest = () => {
return (
<>
<Link to={'/'}>HOME</Link>
<br />
<Link to={'/diary'}>DIARY</Link>
<br />
<Link to={'/new'}>NEW</Link>
<br />
<Link to={'/edit'}>EDIT</Link>
</>
);
};
export default RouteTest;이렇게 작성하시면, 마치 위에서 쓴 a태그와 같은 효과를 냅니다.
4. App 컴포넌트에서 임포트하고 리턴에 넣기
import './App.css';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Home from './pages/Home';
import New from './pages/New';
import Edit from './pages/Edit';
import Diary from './pages/Diary';
import RouteTest from './components/RouteTest';
function App() {
return (
<BrowserRouter>
<div className='App'>
<h2>App.js</h2>
<Routes>
<Route path='/' element={<Home />} />
<Route path='/new' element={<New />} />
<Route path='/edit' element={<Edit />} />
<Route path='/diary' element={<Diary />} />
</Routes>
<RouteTest />
</div>
</BrowserRouter>
);
}
export default App;App.js의 전체 코드입니다.
다 적용하고 나면, 마치 a태그를 쓴 것처럼 링크가 4개 생기게 됩니다!
4. React Router 응용
이번에는 React Router 버전6의 여러 유용한 기능들을 써봅시다.
우리가 사용할 기능은 3가지인데, 다음과 같습니다.
1. Path Variable(useParams)
- 환경변수
2. Query String(useSearchParams)
- url로 데이터 전달
3. Page Moving(useNavigate)
- 유저의 동작이 아니라, 어떤 프로그램에서 함수가 알아서 페이지를 이동시킴
1. Path Variable을 이용한 App.js 수정
우리가 상세 페이지에서 Diary 컴포넌트를 불러올 때, 각 id를 가진 일기 하나씩을 불러올 것입니다.
<Route path='/diary/:id' element={<Diary />} />그래서 먼저 위와같이 작성하면
localhost:3000/diary/[해당 다이어리id]
이렇게 입력했을 때 해당 id의 일기 상세페이지를 볼 수 있게 됩니다.
그 후, Diary.js에서 useParams를 불러와 id 객체로 정의합니다.
App.js의 route에서 path variable을 id로 정의했기 때문에, useParams에서도 id라는 이름의 객체를 만들었습니다.
아래는 Diary.js의 코드입니다.
import { useParams } from 'react-router-dom';
const Diary = () => {
const { id } = useParams();
return (
<div>
<h1>Diary</h1>
<p>이곳은 일기 상세페이지입니다.</p>
</div>
);
};
export default Diary;참고로 useParams는 React Hooks는 아니지만,
사용자정의 외부 라이브러리의 hook이므로 custom Hooks라고도 부릅니다.
2. Query String을 이용한 Edit 수정
Query String이란, url 속 "/edit?id=10&mode=dark" 처럼 이름과 값을 엮어서 url로 데이터를 전송하는 기법입니다.
구조가 단순해서 자주 이용되는 방법으로, 별도의 설정을 하지 않아도 id를 10으로, mode를 다크모드로, 알아서 매핑이 됩니다.
리액트의 useSearchParams를 이용해 쿼리스트링을 실습해볼 것입니다.
Query String으로 edit을 수정해봅시다.
먼저, useSearchParams를 임포트합니다.
import { useSearchParams } from 'react-router-dom';
그 후, useState처럼 선언해 사용합니다.
const [searchParams, setSearchParams] = useSearchParams();
const id = searchParams.get('id');
const mode = searchParams.get('mode');우리가 아까 id와 mode를 쿼리스트링으로 썼기 때문에 id와 mode를 정의하겠습니다.
id의 값을 id로, mode의 값을 mode로 불러왔습니다.
이제 "localhost:3000/edit?id=10&mode=dark"와 같이 id와 mode의 쿼리스트링을 포함한 url을 치면 10과 dark의 정보가 각 변수에 들어가게 될 것입니다.
마지막으로 return에서 setSearchParams를 사용해보겠습니다.
<button onClick={() => setSearchParams({ who: 'mingbee' })}>
QS 바꾸기
</button>이걸 쓸 경우, 버튼을 눌렀을 때 "localhost:3000/edit?id=10&mode=dark"이었던 쿼리스트링이
"localhost:3000/edit?who=mingbee"로 바뀌게 될 것입니다.
3. Page Moving
Page Moving이란, 유저의 동작이 아니라 프로그램상에서 페이지를 강제로 이동시키는 것을 말합니다.
예를 들어 로그인하지 않은 사람이 로그인해야 들어갈 수 있는 페이지를 가려고 할 때,
강제로 로그인페이지로 보내도록 하는 것이 바로 Page Moving입니다.
리액트의 useNavigate를 이용해 Page Moving을 실습해봅시다.
먼저 useNavigate를 임포트합니다.
import { useNavigate, useSearchParams } from 'react-router-dom';
그 후, 버튼을 누르면 /home 페이지로 가도록 하는 버튼을 만들어 리턴에 넣었습니다.
<button onClick={() => navigate('/home')}>HOME으로 가기</button>
여기서 뒤로가기하는 버튼을 만들고 싶으면 url 대신 -1을 쓰면 됩니다.
<button onClick={() => navigate(-1)}>뒤로가기</button>
이렇게 페이지 라우팅에 대해 알아보았고, React Router를 이용해 여러 실습도 해보았습니다.
다음 포스트에서는 본격적으로 프로젝트를 만들기 위한 기초 세팅을 해보겠습니다.
'Udemy' 카테고리의 다른 글
| [React] 일기장 프로젝트 2. 페이지 구현 - 홈화면 (0) | 2023.04.25 |
|---|---|
| [React] 일기장 프로젝트 1. 기초 작업 (0) | 2023.04.25 |
| [React] 리액트 생애주기와 useEffect (0) | 2023.04.17 |
| [React] 데이터 삭제하기, 데이터 수정하기 (0) | 2023.04.17 |
| [React] 데이터 추가 기능 (0) | 2023.04.16 |