새싹 프론트엔드 실무 과정 8주차 React 라우터

 

• 8주차 목요일

14. 리액트 라우터

 

싱글 페이지 어플리케이션

- 페이지 전환 속도가 빠름

- 주소가 변경되어도 서버에 추가로 웹 문서를 요청하는 작업 필요❌

 

단점)

- 어플리케이션 규모가 커지면 자바스크립트 파일 또한 커짐

- 페이지 로딩 시, 사용자가 실제로 방문하지 않을 수도 있는 페이지 스크립트까지 불러옴

 

 

라우팅이란? 

- 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것

 

 

 

 

import React from "react";

import { createBrowserRouter, RouterProvider } from "react-router-dom";

const router = createBrowserRouter([

  {

    path: "/",

    element: <div>Home</div>,

    errorElement: <div>Page Not Found</div>,

  },

  {

    path: "/product",

    element: <div>Product</div>,

    errorElement: <div>Page Not Found</div>,

  },

]);

const App = () => {

  return <RouterProvider router={router} />;

};

export default App;

 

 

❗❗  웹 페이지 링크 추가할 때 <a>태그를 사용❌

- 리액트에서 <a>태그를 직접 사용하면 안됨

- <a> 태그를 클릭하면 새로 불러와서(리랜더링) 기존 변수 등 초기화가 됨

- Link 컴포넌트를 이용해 페이지 이동 가능

<Link to="주소">링크이름</Link>

 

 

 

 

http://localhost:3000/product/3

 

 

 

 

 

 

useNavigate()

- 페이지 방문 기록을 쉽게 관리할 수 있는 hooks

- 내장 함수를 사용하여 뒤로 가기, 특정 페이지로 이동하기 등이 가능

 

 

useParams()

- URL에 포함되어 있는 파라미터 값을 가져와서 사용할 수 있도록 해주는 hooks

 

➡ import { 블라블라} from"react-router-dom";

형식으로 상단에서 부르기!

 

 

 

 

새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 8주차 블로그 포스팅