React -7

리액트 라우터

• 라우팅이란?
  1) 사용자가 요청한 URL에 따라 알맞는 페이지로 보여주는 것을 의미
  2) 여러 페이지로 구성된 웹 애플리케이션을 만들 때 페이지별로 컴포넌트들을 분리해가면서 프로젝트를 관리하기 위해 필요한 것이 라우팅 시스템

-라이브러리 설치
yarn add react-router-dom
npm i react-router-dom

//index.js 에서

import { BrowserRouter } from 'react-router-dom';

Link 컴포넌트를 사용하여 다른 페이지로 이동하는 링크 보여주기

<Link to="경로">링크 이름</Link>

-a태그 : 기본기능x History API로 기능수정

URL 파라미터

주소의 경로에 유동적인 값을 넣는 형태

<Route path="/board/:id" element={<Board />} />
//:id  -> 경로변수 

쿼리스트링

주소의 뒷부분에 ? 문자열 이후 key=value로 값을 정의하며 &로 구분을 하는 형태

useLocation()

-URLSearchParams 생성자

const params = new URLSearchParams(location.search);

params.get('key1');
->value1

params.append("key3", "value3");
//추가됨

-setSearchParams();
주소를바꿈

setSearchParams("k1=v1&k2=v2");

->http://localhost:3000/board/2?k1=v1&k2=v2

-Outlet
주소를 중첩함
중복된 주소의 코드 중첩을 피할 수 있다.

import React from 'react';
import { Outlet } from 'react-router-dom';
const MainLayout = () => {
  return (
    <>
      <header>
        <h1>헤더 영역</h1>
      </header>
      <main>
        <Outlet />
      </main>
      <footer>
        <h1>푸터 영역</h1>
      </footer>
    </>
  );
};

export default React.memo(MainLayout);

-> outlet만 변화함.

<Routes>
    <Route path='/front' element={<MainLayout />}>
        <Route index element={<Home />} />  
        <Route path='about' element={<About />} />
      </Route>

-> index는 상위 경로와 같음.(/front)

-navigate()
파라미터가 숫자타입이라면 앞또는 뒤로 이동한다.

SPA

모든 컴포넌트를 전부 로드하는 문제 -> 초기 로딩이 느려지는 단점

해결하기위한 스플리팅

React.lazy와 Suspense를 통한 코드 스플리팅

CSR

Loadable Components를 통한 코드 스플리팅

yarn add @loadable/component
npm i @loadalbe/component

const MessageBox = loadable(() => import('../components/commons/MessageBox'), {
  fallback: <div>로딩중...</div>
});