useNavigate, NavLink, Lazy Loading

useNavigate 사용방법

navigate도 state를 넘길 수 있음
넘긴 state는 useLocation으로 받으면 된다.
navigate에 replace:true를 같이 사용해주면 이력을 없애줌

navigate와 link의 차이점
navigate는 함수 안에서 쓸 수 있음

1.
 import { useNavigate } from 'react-router-dom'
2. 
  const navigate = useNavigate()
3. 
  <button onClick={()=>navigate("경로", {state: {data: '데이터넘김'} })}>경로로 가기</button>
  <button onClick={()=>navigate(-1, {replace:true})}>뒤로 가기</button>

NavLink 사용방법

1. 
  import { NavLink } from 'react-router-dom'
2. 
  <NavLink 
    style={ ({isActive}) => ({color: isActive ? "lime" : "salmon"}) }>
  </NavLink>

NavLink는 기본적으로 isActive라는 props를 가지고 있음

Lazy Loading

React는 SPA이기 때문에 처음 앱을 불로오는 시간이 오래걸림
이러한 단점을 보안하기위해 파일 자체를 분할하는게 중요
가장 기본적인방법은 dynamic import

React는 lazy와suspense로 이를 구현함

Lazy Loading사용방법

1.
  import { lazy, Suspense } from 'react';
2.
  const lazy원하는곳 = lazy( () => import("lazy할경로"))
3.
  //아직 컴포넌트가 불러와지기전에 유저(사용자)에게 fallback에 있는 정보를 보여줌
  <Route path="/" element={<Suspense fallback={<div>Loading...</div>}><lazy원하는곳 /></Suspense>} />