[React.js] project 3 [감정 일기장] 만들기

 

세 번째 프로젝트 [감정 일기장] 앱을 만듭니다.

프로젝트 준비는 다음 순서로 진행합니다.

1.    요구사항 분석하기
2.    리액트 앱 만들기
3.    폰트 설정하기
4.    이미지 준비하기

[감정 일기장]은 일기를 작성하면서 그날의 자기 감정을 표현하는 서비스이며, 4페이지로 구성되어 있습니다.

프로젝트의 요구사항은 다음과 같습니다.

 

Home 페이지

Home은 사용자가 앱에 접속하면 처음으로 만나는 페이지입니다.

이런 페이지를 보통 인덱스 페이지라고 부르며 경로는 '/'입니다. 인덱스 페이지는 웹 서비스에서 대문 역할을 합니다.

Home 페이지는 크게 상단의 헤더 섹션과 하단의 일기 리스트로 구성됩니다.

헤더 섹션에는 월 단위로 일기를 조회하는 기능이 있는데, 좌우 버튼을 클릭하면 월 단위로 날짜를 이동합니다.

일기 리스트 섹션에는 '최신순', 오래된 순'으로 일기 리스트 를 정렬하는 기능과 새로운 일기를 추가하는 기능이 있습니다. 새 일기 쓰기 버 튼을 클릭하면 새로운 일기를 작성하는 New 페이지로 이동합니다.

 

New 페이지

New는 새로운 일기를 추가하는 페이지입니다. 페이지 경로는 '/new' 입니다.

New는 뒤로 가기 버튼이 있는 헤더와 날짜 입력, 감정 이미지 선택, 일기 작성 폼으로 구성됩니다. 그리고 페이지 하단에는 취소하기, 작성 완료 버튼이 있 습니다. 사용자가 New 페이지에서 일기를 작성하고 작성 완료 버튼을 클릭하면, Home으로 돌아갑니다. 이때 작성한 일기가 Home 페이지의 리스트에 추가됩니다.

 

Diary 페이지

Diary는 작성한 일기를 상세히 조회하는 페이지입니다. Home에서 일기 리스트를 조회한 다음, 특정 일기를 클릭하면 Diary 페이지로 이동합니다.페이지 경로는 '/diary/(일기)id' 입니다.

Diary 페이지 헤더에는 뒤로 가기와 수정하기 버튼이 있습니다. 본문에는 선택한 일기의 감정 상태와 내용을 볼 수 있으며, 헤더의 수정하기 버튼을 클릭하면 일기를 수정하는 Edit 페이지로 이동합니다.

 

Edit 페이지

Edit는 작성한 일기를 수정하는 페이지입니다. Home 또는 Diary에서 수정하기 버튼을 클릭하면 Edit 페이지로 이동합니다. 페이지 경로는 '/edit/(일기)id' 입니다. 삭제 하기 버튼을 클릭하면 일기를 삭제합니다. 이때 리스트에 있는 일기 아이템도 삭제됩니다. 

 

 

 

리액트 앱 만들기

1. 문서(Documents) 폴더 아래에 새 폴더 'projec13'을 만듭니다.
2. 비주얼 스튜디오 코드에서 project3 폴더를 열고, 터미널에서 npx create-react-app .  명령으로 리액트 앱을 만듭니다.
3. stc 폴더에서 다음 4개의 파일을 삭제합니다.

•   src/App.test.js
•   src/logo.svg
•   src/reportWebVitals.js
•   setupTest.js
  
  4. App.js와 index.js에 있는 불필요한 코드는 삭제합니다. 두 파일의 최종 상태는 다음과 같아야 합니다.

import."./App. css";
function App() {
retum cdiv className="App"X/div;
}
export default App;

 

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "-/App";
const root = ReactDOM. createRoot (document.getElementById(" root"));
root. render (<App/>);

 

5. 터미널에서 nom run start 명령을 입력해 리액트 앱을 시작합니다.

 

 

폰트 설정하기

리액트 앱에서 사용자가 원하는 폰트를 지정할 때는 파일을 다운로드해 프로젝트에 포함하거나 웹에서 불러오는 방법이 있습니다.

이번에는 두 가지 방법 중 특정 URL로 폰트를 가져오는 '웹 폰트' 방식을 이용합니다.

 

구글 Fonts에 접속해 폰트 가져오기

웹 폰트를 가져오려면 이를 저장한 서버의 주소를 알기 위해 구글 Fonts를 이용합니다.

https://fonts.google.com

(구글 Fonts는 웹 서비스이므로 시간이 지남에 따라 버전이 업데이트됩니다. 따라서 사용 방법이 다를 경우는 폰트 자체의 주소를 사용해야합니다.)

구글 Fonts 홈페이지에 접속하면 매우 다양한 폰트를 만날 수 있습니다. 수많은 폰 트 중에서 이 프로젝트에서는 'Nanum Pen Scripi와 Yeon Sung' 폰트를 사용합니다.

Nanum Pen Script 박스를 클릭하고, Styles 섹션의 오른쪽에 있는 'Select Regular 400'을 클릭합니다. 오른쪽의 Selected families 창에서 Nanum Pen Seript 폰트가 자동으로 선택되었는지 확인합니다.

 

다시 구글 Fonts 홈페이지로 이동합니다. 마찬가지로 검색 폼에서 Yeon Sung을 입력해 폰트를 검색합니다. 검색 결과로 나온 Yeon Sung 폰트의 'Styles' 섹션으로 이동해 Select Regular 400을 클릭하면, [Selected families] 창에 자동으로 Yeon Sung 폰트가 추가됩니다.

 

2개의 폰트가 정상적으로 추가되었다면 웹폰트 주소를 확인하기 위해 [Selected families] 창 중간에 있는 'Use on the web'에서 <styles> 태그 항목을 찾습니다. 이 태그 항목 아래에 eimport~로 시작하는 웹 폰트 주소가 있습니다.

<style> 태그에는 프로젝트에서 @import 명령으로 이 폰트를 불러오는 코드 예시와 CSS 폰트 사용 규칙이 적혀 있습니다.

<style> 태그의 @import url(...)로 시작하는 구문을 통째로 드래그해 복사합니 다. 계속해서 감정 일기장 프로젝트로 돌아와 index.css의 스타일 규칙을 모두 지우고 다음과 같이 작성합니다.

@import url("https://fonts.g0ogleapis.com/css2?1amjly-Nanum•PenrScript&fam1ly=
Yeon+Sung&display swap");
body {
font-family: "Nanum Pen Script";
margin: 0px;
}

 

코드는 두 개의 폰트 Nanum Pen Scmpr와 Yeon Sung을 웹 폰트 방식으로 불러옵니다. 그리고 body 태그의 font-familly 속성에 Nanun Pen Script 폰트를 지정했습니다.

 

 

가져온 폰트 적용하기

App 컴포넌트에서 가져온 폰트를 이용해 '감정 일기장'이라는 문자열을 페이지에 렌더링하겠습니다. App.js에 서 다음과 같이 작성합니다.

import "./App. css";
function App() {
return (
‹div className="App">
<h1>감정 일기장</h1>
</div>
);
}
export default App;

다음으로 App.css의 스타일 규칙은 모두 삭제합니다.

앞서 index.css에서 작성한 Nanum 폰트가 잘 적용되는지 확인합니다.

동일한 방법으로 이번에는 Nanum 대신 Yeon Sung 폰트를 확인하겠습니다. index.css를 다음과 같이 수정합니다.

(...)
body {
font-family: "Yeon Sung";
margin: 0px;
}

 

리액트 앱에서는 CSS의 @import 문법으로 원 하는 웹 폰트를 가져올 수 있습니다. 

다음 과정 진행을 위해 폰트 적용 여부를 확인했던 index.css의 font-family 속성 은 삭제합니다.

 

 

이미지 준비하기

[감정 일기장] 프로젝트에서 사용할 이미지를 다운로드해 페이지에 렌더 링하는 방법을 알아보겠습니다.

[감정 일기장]에서는 '완전 좋음' 부터 '끔찍함까지 모두 다섯 단계의 감정 이미지를 사용합니다.

이 이미지 파일들을 사용하려면 [감정 일기장] 프로젝트로 옮겨야 합 니다. 프로젝트의 stc에 img 폴더를 생성하고 파일명 그대로 저장합니다.

 

img 폴더는 public이 아닌 src에 생성합니다. 이 폴더에 저장한 이미지 파일들은 앞으로 자바스크립트 모듈처럼 import 문으로 불러와 <img> 태그와 함께 사용합니다.

이미지를 잘 불러오는지 테스트하겠습니다. 1번 감정 이미지를 App 컴포넌트에서 불러오도록 다음과 같이 작성합니다.

 

 

이미지를 불러오는 함수 만들기

[감정 일기장] 프로젝트에서는 감정 이미지를 여러 컴포넌트 또는 페이지에서 불러 옵니다.

이미지 번호에 맞게 적절한 이미지를 반환하는 함수를 만드는 게 필요합니다. 그리고 이미지 반환 함수는 별도의 파일에서 만들어야 합니다. 앞으로 감정 이미지를 사용하는 컴포넌트나 페이지는 이 파일에서 이미지 반환 함수를 불러 올 수 있어야 합니다.

src 폴더에서 util.js 파일을 만듭니다. 이 파일에서 감정 이미지를 반환하는 함수를 만듭니다. util.js에서 다음과 같이 작성합니다.

import emotion1 from "./img/emotion1.png"; 
import emotion2 from "./img/emotion2.png";
import emotion3 from "./img/emotion3.png";
import emotion4 from "./img/emotion4.png"; 
import emotion5 from "./img/emotion5.png";
export const getEmotionImgById = (emotionId) => {
const targetEmotionId = String(emotionId);
switch (targetEmotionId) {
case "1":
return emotion1;
case "2":
return emotion2;
case "3":
return emotion3;
case "4":
return emotion4;
case "5":
return emotion5;
default:
return null;
}
};

 - 함수 getEmotionimgById의 매개변수 emotionId에는 페이지나 컴포넌트에서 전달된 감정 이미지 번호가 저장됩니다.

 - emotionId가 문자열이 아닌 숫자로 제공될 수도 있기 때문에 String 메서드를 이용해 명시적으로 형 변환합니다.

  - switch 문으로 번호와 일치하는 이미지를 찾아 반환합니다.

 

App 컴포넌트에서 함수 getEmotionImgById를 호출해 모든 감정 이미지를 페이지에 렌더링합니다.

Import { getEmotionImgById } from "./util"; 
function App() {
return (
‹div className="App">
<img alt="Z81" src={getEmotionImgById(1)}/> <img alt="2" src={getEmotionImgById(2)}/>
cing alt="감정3" src={getEmot ionImgById(3)} /> <ing alt="감정4" Src={getEmotionImgById(4)}/>
<img alt="Jy5" src={getEmotionImgById(5)}/>
</div>
);
}
export default App;

 

여러 컴포넌트에서 공통으로 사용할 기능들을 util.js 같은 별도 파일에 만들어 두고, 필요할 때 불러다 쓰면 중복 코드를 피할 수 있어 매우 유용합니다.

 

페이지 라우팅

라우팅이란?

라우팅은 경로를 의미하는 Route와 진행을 뜻하는 ing가 합쳐진 단어로, '경로를 지정하는 과정'이라는 뜻입니다.

라우터를 거쳐 전송하는 이유는 데이터를 한 번에 전송하기에 는 물리적으로 거리가 너무 멀기 때문입니다.

데이터는 여러 개의 라우터를 거쳐 전송됩니다. 라우터는 현재 위치에서 가장 빨리 이동하는 경로를 찾아 메시지를 전송합 니다.

결국 라우팅은 "데이터 전달을 목적으로 최적의 경로를 찾아 데이터를 전송하는 과정"이라고 정의할 수 있습니다.

 

페이지 라우팅이란?

페이지 라우팅은 요청에 따라 적절한 페이지를 반환하는 일련의 과정입니다. 웹 서비스에서 URL로 페이지를 요청하면, 웹 서비스는 요청한 페이지를 사용자에게 보내줍니다.

페이지 라우팅은 "URL 요청 경로에 맞게 적절한 페이지를 보여주는 과정"입니다.

URL경로에 아무것도 표시하지 않으면, 웹 서비스는 시작 페이지를 보여줍니다. 이 페이지를 '인덱스' 혹은 '인덱스 페이지라고 합니다.

 

리액트의 페이지 라우팅

페이지 라우팅의 구현은 웹 페이지를 어디서 만드느냐에 따라 서버 사이드(Sever Side) 렌더링과 클라이언트 사이드(Client Side) 렌더링 두 가지로 구분합니다. 리액트는 이 두 방법 중 브라우저에서 페이지를 만드는 '클라이언트 사이드 렌더링' 방식을 채택합니다.

 

 

project 3 [감정 일기장] 만들기

서버 사이드 렌더링에서 페이지 라우팅은 다음과 같이 동작합니다.

1.    웹 브라우저에서 winterlood.com/blog라는 URL로 서비스를 요청합니다.
2.    웹 서버는 요청 URL에서 경로 blog를 확인하고, blog.html을 생성해 반환합니다.
3.    웹 브라우저는 웹 서버에서 반환된 blog.html을 보여줍니다.

사용자가 버튼 또는 링크를 클릭해 페이지를 이동할 때는 다음과 같이 동작합니다.

1.    웹 브라우저에서 winterlood.com/books로 서비스를 요청합니다.
2.    웹 서버는 요청 URL에서 경로 books를 확인하고 books.html을 생성해 반환합 니다.
3.    웹 브라우저는 웹 서버가 반환한 books.html을 보여줍니다. 이때 페이지가 교체되기 때문에 브라우저가 깜빡이면서 새로고침이 발생합니다.

이런 식의 페이지 라우팅을 서버 사이드 렌더링이라고 합니다. 이 방식은 웹 브라우저에 표시할 페이지를 웹 서버에서 만들어 전달합니다.

 

서버 사이드 렌더링은 검색 엔진을 최적화하며, 처음 접속할 때 속도가 빠르다는 장점이 있습니다. 반면 사용자가 페이지를 이동할 때마다 서버가 새로운 페이지를 생성해 제공하려면 많은 연산을 수행하게 되므로, 수많은 요청이 동시에 이루어지는 서비스라면 서버에 부하가 걸릴 위험성이 높고 속도가 느려진다는 단점이 있습니다.

 

클라이언트 사이드 렌더링

리액트 앱은 html 파일이 하나뿐인 단일 페이지 애플리케이션(Single Page Appli-Cation)입니다.

html 파일이 하나이기 때문에 서버 사이드가 아닌 클라이언트 사이 드 렌더링으로 페이지를 라우팅합니다.

클라이언트 사이드 렌더링에서는 페이지를 브라우저가 직접 만드는데 다옴과 같이 동작합니다.

1.    웹 브라우저가 winterlood.com/blog로 서비스를 요청합니다.
2.    웹 서버는 요청 URL의 경로를 따지지 않고 페이지의 역할을 하는 index.
   html과 자바스크립트 애플리케이션인 리액트 앱을 함께 반환합니다.
3.    웹 브라우저는 서버에서 제공된 index.html 페이지를 보여주고, 자바스크립트 로 이루어진 리액트 앱을 실행합니다. 그리고 리액트 앱은 현재 경로에 맞는 페 이지를 보여줍니다.
4.    사용자가 페이지를 이동하면 웹 브라우저는 서버에서 받은 리액트 앱을 실행해 자체적으로 페이지를 교체합니다.

 

클라이언트 사이드 렌더링의 핵심은 사용자가 보는 페이지를 웹 서버가 아닌 브라우저가 완성한다는 점입니다. 브라우저는 처음 접속할 때만 서버에게 데이터를 요청하며, 페이지를 이동할 때는 별도의 요청을 하지 않습니다.

클라이언트 사이드 렌더링에서는 서버가 html 파일과 자바스크립트 애플리케이션을 함께 제공하기 때문에, 처음 사이트에 접속할 때는 서버 사이드 렌더링보다 속도가 느립니다. 그러나 페이지를 이동할 때는 브라우저에서 페이지를 직접 교체하므로 속도가 훨씬 빠릅니다.

 

두 방법 모두 각각의 장 단점을 지니고 있기 때문에 목적에 따라 적절한 방식을 택해야 합니다.

 

리액트 라우터로 페이지 라우팅하기

클라이언트 사이드 렌더링을 채택하고 있는 리액트 앱에서 페이지 라우팅을 구현 합니다.

 

리액트 라우터란?

리액트 라우터는 Remix 팀에서 제작한 오픈소스 라이브러리입니다. 이 라우터를 이용하면 단 몇 줄의 코드만으로 여러 페이지로 구성된 리액트 앱을 간단히 구축할 수 있습니다.

 

리액트 라우터 설치하기

npm을 이용해 리액트 라우터를 [감정 일기장] 프로젝트에 설치합니다.

 

프로젝트에 라우터 적용하기

(감정 일기장] 프로젝트에서 설치한 라우터를 적용하겠습니다. 리액트 라우터가 제 공하는 BrowserRouter 컴포넌트로 App를 감싸면 됩니다.

index.js에서 다음과 같이 작성합니다.

(...)
import {BrowserRouter } from "react-router-dom"; 
const root = ReactDOM. createRoot (document. getElementById(" root"));
root. render (
<BrowserRouter> 
<App />
</BrowserRouter>
);

 

BrowserRouter에는 브라우저의 주소 변경을 감지하는 기능이 있습니다. 이 라우 터는 컴포넌트가 페이지를 구성하고 이동하는 데 필요한 기능을 다양하게 제공합 니다.

 

페이지 컴포넌트 만들기

여러 페이지로 구성된 리액트 앱을 리액트 라우터로 만들겠습니다. 그 전에 페이지 역할을 담당할 컴포넌트부터 만들어야 합니다. 요구사항 분석에서 살펴본 것처럼 페이지는 다음과 같이 구성합니다.

•   Home: 인덱스 페이지
•   New: 새 일기 작성 페이지
•   Diary: 일기 상세 조회 페이지
•   Edit: 작성한 일기를 수정하거나 삭제하는 페이지

페이지 역할을 담당할 컴포넌트는 별도의 폴더로 분리합니다.

 

Home

인덱스 페이지 역할을 담당할 컴포넌트를 만듭니다. pages 폴더에 Home js를 만들고 다음과 같이 작성합니다.

const Home = () => {
	return <div>Home 페이지입니다</div>;
};
export default Home;

 

New

새로운 일기를 작성하는 New.js를 pages 폴더에 만들고 다음과 같이 작성합니다.

const New = () => {
	return <div>New 페이지입니다</div>;
};
export default New;

 

Diary

작성한 일기를 상세히 볼 수 있는 Diary.js를 pages 폴더에 만들고 다음과 같이 작성합니다.

const Diary = () => {
	return <div>Diary 페이지입니다</div>;
};
export default Diary;

 

Edit

작성한 일기를 수정하고 삭제하는 Edit.js를 pages 폴더에 만들고 다음 과 같이 작성합니다.

const Edit = () => {
	return <div>Edit 페이지입니다</div>;
};
export default Edit;

 

페이지 라우팅 구현하기

총 4개의 페이지 컴포넌트를 URL 경로에 따라 브라우저에 렌더링하도록 페이지 라우팅을 구현합니다.

react-router-don이 제 공하는 Routes와 Route 컴포넌트를 이용하여 간단하게 구현합니다.

앞서 App.js에서 감정 이미지를 불러오는 코드는 모두 삭제하고 다음과 같이 작성합니다.

import { Routes, Route } from "react-router-dom"; 
import "./App.css";
import Home from "./pages/Home";
import New from "./pages/New";
import Diary from "./pages/Diary"; 
import Edit from "./pages/Edit";

function App() {
	return (
		<div className="App">
			<Routes>
				<Route path="/" element={<Home />} />
				<Route path="/new" element= {<New />} />
				<Route path="/diary" element= {<Diary />} /> 
				<Route path="/edit" element={<Edit />} />
			</Routes>
		</div>
	);
}
export default App;

 

Routes 문은 자바스크립트의 Switch 문과 유사합니다. Routes를 switch, Route를 case와 비슷합니다.

Routes는 자신이 감싸는 Route 컴포넌트 중에서 브라우저 주소 표시줄에 입력된 URL 경로와 일치하는 요소를 찾아 페이지에 렌더링합니다.

 

 

브라우저의 주소 표시줄에 localhost:3000/new를 입력해 New 페이지가 잘 렌더링 되는지 확인합니다.

Routes는 자식인 Route 컴포넌트에서 설정한 경로와 요청 URL을 비교합니다. 그리고 라우팅 설정 후 일치하는 컴포넌트를 element 속성에 전달해 렌더링합니다. 설정되지 않은 라우팅 경로로 접근하면 아무것도 렌더링하지 않습니다.

 

 

 

페이지 이동 구현하기

리액트 라우터로 페이지 라우팅을 구현하는 앱에서는 경로로 분리된 페이지 간을 이동하기 위해 Link라는 컴포넌트를 이용합니다.

 

<Link to='이동할 경로'>링크 이름</Link>

 

Link 컴포넌트는 to 속성에 경로를 지정해 페이지를 이동합니다.

App에서 Link 컴포넌트를 이용해 페이지를 이동하도록 링크를 추가합니다.

import {Routes, Route, Link) from "react-router-dom";
(...)
function App() {
	return (
		<div className="App">
			<Routes>
				<Route path="/" element={<Home />} />
				<Route path="/new" element={New />} />
				<Route path="/diary" element= {Diary />} />
				<Route path="/edit" element= {<Edit />} />
			</Routes>
		<div>
			<Link to={"/"}>Home</Link>
			<Link to={"/new"}>New</Link>
			<Link to={"/diary">Diary</Link>
			<Link to={"/edit"}>Edit</Link›
		</d1v>
	</div>
);
}
export default App;

 

 

리액트 라우터로 동적 경로 라우팅하기 

동적 경로란 값이 변하는 요소를 URL에 포함하는 경우를 말합니다. 

동적 경로의 종류 | 동적 경로를 표현하는 방법에는 URL 파라미터와 쿼리 스트링 두 가지가 있습니다.

 

URL 파라미터

URL 파라미터는 URL에 유동적인 값을 넣는 방법입니다.

보통 유동적인 값은 중괄 호로 표기합니다. 이 방법으로 특정 id를 포함한 상세 페이지의 URL은 다음과 같이 표기합니다.

https://localhost:3000/diary/(id}

주로 id나 이름을 이용해 특정 데이터를 조회할 때 사용합니다.

 

쿼리 스트링

쿼리 스트링은 물음표(?) 뒤에 key=value 문법으로 URL에 유동적인 값을 포함하는 방법입니다.

https://localhost:3000?sort=latest

URL에 유동적인 값을 두 개 이상 포함해야 한다면 &로 구분합니다.

보통 게시물 리스트에서 사용자가 정렬 조건을 선택하거나 현 재 조회하는 게시판의 페이지를 표현할 때 사용합니다.

 

 

동적 경로 이용

리액트 라우터로 동적 경로가 포함된 페이지를 렌더링하는 페이지 라우팅을 구현하겠습니다.

URL 파라미터로 경로 설정하기

감정 일기장에서 Dlary 페이지는 특정 id를 가진 일기를 상세 조회할 때 사용합니다. 이 페이지로 이동하기 위해서는 어떤 일기 아이템을 조회할지 경로를 알려주어야 하는데, 다음과 같이 URL 파라미터 방식을 사용합니다.

https://localhost:3000/diary/3

동적 경로가 포함된 페이지를 라우팅하려면, Route 컴포넌트에서 URL 파라미터 방식으로 전달해야 합니다.

App 컴포넌트에서 다음과 같이 수정합니다.

(...)
function App() {
	return (
	(...)
		<Routes>
			<Route path="/" element={<Home />} />
			<Route path="/new" element={<New />} />
			<Route path="/diary/:id" element={<Diary />} /> 
			<Route path="/edit" eLement={<Edit />} />
		</Routes>
	(...)
);
}
export default App;

 

브라우저 주소 표시줄에 locaLhost: 3000/diary/3을 입력하면, 아직 상세 페이지가 만들어지지 않았으므로 Diary 페이지로 이동합니다.

 

 

URL 파라미터 값 불러오기

URL 파라미터로 전달한 일기 id를 불러와 Diary 페이지에서 사용합니다. react-router-dom이 제공하는 리액트 훅 useParams를 이용합니다. Diary.js를 다음과 같이 수정합니다.

import { useParams } from "react-router-dom";
const Diary = () => {
	const params = useParams();
	console.log(params);
	return <div>Diary 페이지입니다</div>;
};
export default Diary;

 

Diary 컴포넌트를 다음과 같이 수정합니다

import { useParams } from "react-router-dom";
const Diary = () => {
	const { id } = useParams();
	return ( 
    	<div>
			<div>{id}번 일기</div>
			<div>Diary 페이지입니다</div>
		</div>
	);
};
export default Diary;

 

 

쿼리 스트링으로 값 불러오기

쿼리 스트링은 URL 경로 다음에 ?로 구분하므로 URL 파라미터처럼 페이지 라우팅을 위한 별도의 설정이 필요 없습니다.

react-router-dom의 useSearchParams라는 리액트 혹을 이용해, URL에 있는 쿼리 스트링 값을 꺼내 사용합니다.

Home 컴포넌트를 다음과 같이 수정합니다

import { useSearchParams } from "react-router-dom";
const Home = () => {
	const [searchParams, setSearchParams] = useSearchParams(); 
	console.log(searchParams.get("sort"));
	return <div>Home 페이지입니다</div>;
};
export default Home;

 

이렇게 하면, 리액트 라우터를 이용한 페이지 라우팅은 모두 완료되었습니다.

프로젝트를 구현하는 과정에서는 공통 컴포넌트를 먼저 구현하는 것이 오류 발생을 줄여주는데 도움이 됩니다.

 

---

 

출처 :  이정환, 『한 입 크기로 잘라먹는 리액트』, 프로그래밍인사이트(2023)

Corner React.js

Editor: J