감성일기장 (여러 페이지로 구성된 웹사이트 만들기) - 1

Page Routing

-> 요청에 따라 어떤 페이지를 돌려줄지 결정하는 과정

 

Single Page Application

리액트는 single page application 방식을 따르게 된다

-> 무슨 페이지를 요청하든 똑같은 index.html만 보내준다

 

무슨 페이지를 요청하든 똑같은 index.html만 보내주고 리액트 앱을 통째로 던져주게 된다 (SPA)

- 서버에게 post를 달라고 하는 게 아님!

- 페이지의 이동이 서버를 거치지 않고 리액트 앱이 알아서 페이지를 업데이트 시켜준다 (CSR)

 (통신 이동이 필요없이 브라우저가 알아서 처리해버림)

- data가 필요한 경우에만 서버에게 데이터를 전달해달라하고 전달 받는 방식

 

CSR(Client Side Rendering)을 도와주는 라이브러리를 사용해야 한다

-> React Router라는 라이브러리를 사용해야 한다

npm install react-router-dom@latest

-> 최신 버전 설치 명령어

 

정상적으로 설치되었는지는 package.json에

이게 떠있는지 확인함으로써 알 수 있다

---

본격적으로 랜더링 하기 전에 모든 페이지 컴포넌트 만들기

 

src>pages>페이지 만들기

1. Home.js, Diary.js, Edit.js, New.js 만들기

 

2. 브라우저 url과 리액트 앱을 연결하는 기능을 하는 browser router로 감싸기

  -> 감싸진 부분 : 브라우저 url과 매핑될 수 있다

 

3. <Routes>

브라우저의 URL이 바뀌게 되면 어떤 컴포넌트를 랜더링해서 페이지 역할을 하게 할 건지 결정하기 위해 바뀔 부분을 <Routes>로 감싸기

-> Routes 밖에 있는 애들은 

4. <Route>

실질적으로 URL 경로와 컴포넌트를 매핑시켜주는 컴포넌트

---

네비게이션 바 만드는 방법

 

<RouteTest.js>

 Link : CSR 방식으로 컴포넌트 이동시켜줌

<Link to={경로}></Link>

 

<App.js>

 

---

페이지 라우팅 2

 

1) Path Variable

: url에 변수를 담아 전달하는 방법

   ex) /diary/1

: useParams라는 훅을 이용해 가져올 수 있다

 -> path="/diary/:id"로 바꿔주기

 

useParams : 전달받은 path variable (ex)id) 을 모아서 객체로 갖다주게 된다

-> url에 들어있는 id 값을 꺼내 쓸 수 있게 해준다

   -> const {id} =useParams();

 

2) Query

웹 페이지에 데이터를 전달하는 가장 간단한 방법

                                                       query string : name과 value를 엮어서 전달해준다

                                                       물음표 뒤의 경로들은 페이지 라우팅에 영향 안 준다

 

const [searchParams, setSearchParams] = useSearchParams(); 이용한다

setSearchParams는 setState와 마찬가지로 searchParams의 값을 바꾸는 애다

-> setSearchParams에 객체를 전달해주어야 함

 

3) Page Moving

: useNavigate 훅 : 페이지를 이동시킬 수 있는 기능의 함수를 반환해줌

: navigate의 인자로 경로 작성 : Navigate 함수를 호출해 경로를 변경해줄 수 있다

-> link 태그를 클릭하지 않아도 페이지를 바꿔버릴 수 있다 

ex) 로그인 안된 사용자 로그인 페이지로 가려할 때 로그인 값을 검사해 로그인을 안했다면 로그인 페이지로 강제로 보내버릴 때 사용

use navigate = useNavigate();

 

<Edit.js>

cf) 뒤로 가기 : navigate(-1)

 -> 뒤로 한 번 가서 -1이다