감정일기장 - 페이지 라우팅

페이지 라우팅

다양한 페이지 구현을 위해 페이지 라우팅을 사용

- 특정 주소의 페이지를 요청하면, 서버는 요청에 맞는 페이지를 찾아서 반환한다
- 브라우저는 서버로부터 받은 HTML페이지를 화면에 그대로 렌더링한다

 

- MPA 방식: 서버가 여러 개의 HTML 페이지를 갖고 있는 것
- 서버 사이드 렌더링: MPA에서 브라우저가 페이지를 요청했을 때 미리 완성되어 있는 페이지를 응답하는 방식

리액트 어플리케이션은 MPA 방식을 따르지 않음

MPA 방식

: 페이지를 이동할 때마다 기존 렌더링 해뒀던 페이지를 삭제하고,

새로운 페이지를 받아화서 화면을 처음부터 렌더링한다 (이 과정에서 새로고침처럼 깜박임)

 

SPA 방식
- 앱이 처음 로드될 때 필요한 모든 HTML, CSS, JS 파일을 한 번에 가져온다. 페이지 이동 시 HTML파일을 요청하지 않고, 자바 스크립트로 화면을 동적으로 바꿔준다.
>> 한 페이지로 작동한다

- index.html(하얀 화면만 있는 빈 껍데기)를 먼저 렌더링하고 모든 js파일을 번들링(= 여러 개의 js파일을 묶어주는 행위)해서 브라우저에 추가로 전달을 한다
- UPL은 바뀌지만 새로고침은 없다

번들 파일이 리액트의 앱이라 할 수 있다(브라우저에서 실행되기 때문)

클라이언트 렌더링: 브라우저에서 직접 js파일을 실행해서 화면을 직접 렌더링을 처리하는 방식
(서버사이드 렌더링과 반대되는 개념)

- 리액트 웹서버는 리액트 앱을 브라우저에게 전달해주는 역할을 할 뿐이다
- 실제로 리액트 앱은 브라우저에서 실행이 된다
(MPA의 단점을 보완하기 위해)

 

 

 

 

 

Link는 HTML의 a태그를 대체하는 기능
- a 태그를 사용해서 페이지를 이동하면 화면이 깜박거림(link컴포넌트가 더 쾌적)
- useNavigate이라는 커스텀 훅은 페이지를 실제로 이동시킨다

---

동적 경로

 

URL Patameter

 <Route path="/diary/:id" element={<Diary />} />

- path props에 /:id 를 추가하면 이 뒤에 어떠한 값이 있어도 이 값은 무조건 동적 경로인 URL 파라미터를 의미한다

import { useParams } from "react-router-dom";

const Diary = () => {
    const params = useParams();
    console.log(params);

    return <div>(params.id)번 일기입니다~~</div>
};

- path props에 /:id 를 추가하면 이 뒤에 어떠한 값이 있어도 이 값은 무조건 동적 경로인 URL 파라미터를 의미한다

 

- useParams 커스텀 훅은 URL파라미터의 값을 꺼내올 수 있도록 설정한다

 

Query String

import { useSearchParams } from "react-router-dom";

const Home = () => {
    const [params, setParams] = useSearchParams();
    console.log(params.get("value"));

    return <div>h</div>
};

- useParams 커스텀 훅은 URL파라미터의 값을 꺼내올 수 있도록 설정한다
- params에는 쿼리에 전달한 변수와 값이 들어오고, setParams는 특정 쿼리스트링의 값을 변경할 수 있는 함수가 들어오게 된다