TC - 13번일지 (Routing)

Debug-Life ·2023년 3월 18일

React

TC - 어플개발 (Twitter clone coding)

목록 보기

11/21

19. 라우팅

: 여러 경로를 정의해 여러 페이지를 로드하고 해당 경로에서 다른 컴포넌트를 로드하기 위해 사용한다. 아주 자그마한 데모 프로젝트를 제외한 대부분의 앱에는 라우팅이 필요하다

✍ 왜 필요할까?

내가 진행하고 있는 프로젝트를 예로 들면 다른 이에게 새로운 포스트 작성창 링크를 줄 수 없다는 어려움이 있기 때문이다.

어플이 복잡해지고 커질 수록 여러개의 페이지가 존재할텐데 만약 타인에게 공유할 url이 하나뿐이라면 (즉, 메인 화면) 공유하려고 하는 해당 페이지까지 찾아가야하므로 매우 번거로운 작업이 아닐 수 없다. 따라서 우리는 해당 url 마다 공유할 수 있는 수단이 필요하다.
그게 바로 라우팅이다.

cf.

spa 즉, 하나의 페이지는 유지하되, url 경로로만 접근해서 렌더링 해주는것이 리액트에서 사용하는 리액트 라우팅 패키지이다.

라우팅은 프론트쪽에서 하는것. 프론트쪽에서 여러경로를 지정해서 렌더링 함

그래서 리액트 프로젝트에서 라우팅을 사용하려면 패키지 인스톨이 필요하다.

또, v5 와 v6와 많이 달라졌고, v6에서 loader() action() 기능이 추가 되어서 매우 간단하게 백엔드에서 데이터를 보내고 불러오는 작업이 가능하게 되었다.

19-1. 목표

라우팅을 이용해 공유하고 싶은 페이지의 url을 만들어준다.

총 3가지 페이지를 만든다.

시작 페이지

새 포스트 작성

상세 페이지 (Post 클릭했을떄 나오는 상세 페이지)

19-2. 절차

1. 라우팅 패키지 설치

프론트 개발 서버 중단 후 'npm install react-router-dom'

2. 라우팅 활성화

리액트, 리액트 라우터에게 라우팅 사용할 것임을 알려주기.
main.jsx 에 react-router-dom RouterProvider import 하기
jsx 코드에 App 대신 RouterProvider 사용
RouterProvider 이 컴포넌트는 라우팅을 활성화하고 리액트 라우터에게 URL을 확인해 다른 경로에 있는 다른 컴포넌트를 렌더링하라고 명령한다.

✍main.jsx

import React from "react";
import ReactDOM from "react-dom/client";
import { RouterProvider, createBrowserRouter } from "react-router-dom";

import App from "./App";
import NewPost from "./components/NewPost";
import "./index.css";

const router = createBrowserRouter([
 {
   path: "/",
   element: <App />,
 },
]);

ReactDOM.createRoot(document.getElementById("root")).render(
 <React.StrictMode>
   <RouterProvider router={router} />
 </React.StrictMode>
);

3. 라우터 설정하기.

리액트 라우터에게 어느 경로에서 어떤 컴포넌트를 로드할 건지 알려주려면..

createBrowserRouter를 호출해 변수에 담고 인자로는 배열을 받는데 모든 필요한 라우트들을 담는다.
그배열안에 들어가는 것들은 라우트의 정의이고, 객체 형태로 집어넣는다.
여러 객체를 추가할 수 있고, 각 객체가 하나의 라우트 하나의 경로 그리고 해당 경로에서 로드해야 할 컴포넌트를 의미한다.

객체 안에 들어가는 property

path : 단일 라우트 경로를 정의한다.

element : 이 라우트가 활성화됐을 때 화면에 렌더링할 JSX 코드

✍main.jsx

import React from "react";
import ReactDOM from "react-dom/client";
import { RouterProvider, createBrowserRouter } from "react-router-dom";

import App from "./App";
import NewPost from "./components/NewPost";
import "./index.css";

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
  },
  {
    path: "/create-post",
    element: <NewPost />,
  },
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

✍ 저장 후 결과화면

이렇게 에러가 난다.

여기까지 저장하고 나서 url에 /new 를 추가해서 입력하면 이렇게 나온다.
리액트 라우터가 동작하고 있기 때문에 이렇게 라우트를 찾지 못 했다는 메시지가 나오는것임.
'/', /create-post 라우트 2개만 정의했기 때문이다. 그래도 동작하는것은 확인했으니 이제 다른 라우터도 추가해주자.