💡 3/27 useForm, router

📍 router

라우팅(Routing)이란?

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

리액트 라우터(React Router)

• 개발자가 주소별로 다른 컴포넌트를 보여주기 위해 사용하는 라이브러리
• 여러 환경에서 동작할 수 있도록 다양한 종류의 라우터 컴포넌트 제공한다.

npm install react-router-dom@6 버전 6로 지정 설치

✅ BrowserRouter

• HTML5를 지원하는 브라우저의 주소 감지하는 Router의 역할을 한다.
• 새로고침을 하지 않아도 새로운 컴포넌트를 렌더링 해주는 기능 담당
• URL마다 컴포넌트가 바뀔 때 이때 바뀌는 부분의 최상단(src > index.js)에 위치해야 한다.

BrowserRouter를 적용해줘야 Routes, Route, Link 등 컴포넌트들을 사용할 수 있다.

src > index.js 에 적용한다. (<App />컴포넌트를 감싼 형태로 사용)

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

const root=ReactDOM.createRoot(document.getElementById('root'));
root.render(
	<>
      <BrowserRouter>
       <App />
      </BrowserRouter>
    </>

✅ Routes & Route

경로가 일치하는 컴포넌트를 렌더링 할 수 있도록 처리한다.
(<Route> 태그의 path=""에 경로를, element={}에 컴포넌트를 작성한다.)

import { Routes, Route } from "react-router-dom";

 	<Routes>
        <Route path="/" element={<MainPage />} />
        <Route path="/test" element={<Test />} />
        <Route path="/products" element={<ProductPage products={products} />} />
        <Route path="/photos" element={<PhotoPage photos={photos} />} />
        <Route path="/products/:productId" element={<ProductDetailPage products={products} />} />
        {/* 404 page는 마지막에 위치시키는 것 권장 */}
        <Route path="*" element={<NotFound />} />
      </Routes>

✅ Link

• 경로를 변경한다.
• 기존 HTML 의 a 태그가 새로고침 해 렌더링을 수행했다면 컴포넌트는 페이지 전환을 방지한다. (화면 전환 시 깜빡거리는 현상을 일으키지 않는다.)
• to="" 속성을 이용해 라우팅

  <Link to="/"> Home </Link>

react hook인 useNavigate()를 이용해서 페이지 이동을 할 수도 있다.

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

export default function Page() {
const navigate = useNavigate();
  return(
    <main>
 	    <button onClick={() => navigate("/")}>홈으로 이동하기</button>
    	<button onClick={() => navigate(-1)}>이전 페이지로</button>
    </main>
  )
}

🧐 <Link> 컴포넌트 VS useNavigate() hook

두 방법 모두 페이지를 이동하는데 사용한다. 그렇다면 이 방법들에는 어떤 차이가 있을까?

1. <Link> 컴포넌트는 조건 없이 to=""속성에 작성한 경로로 이동한다.

2. useNavigate()는 함수 호출 후 특정 조건을 만족했을 때 페이지 이동을 하도록 할 수 있습니다. ex) 회원가입한 경우 로그인 페이지로 이동, 로그인 한 회원 메인페이지 이동 등

   
   

✅ parameter & query 활용

1. useParams()

• /product/:id 중 id

• <Route>의 path=""에 :를 사용해 설정되는 것

• URL 파라미터가 여러개인 경우 /product/:id/:name 처럼 설정

  import {useParams} from "react-route-dom";
  
  const {URL 파라미터명} = useParams.;
  // const 변수명 = useParams().파라미터명;

2. useSearchParams()

• <Route>에서의 라우팅은 하지 않는다.

• useSearchParams()를 활용하여 URL의 쿼리 데이터를 활용할 수 있다.
  쿼리 스트링(URL의 IP:PORT/파라미터? 이후 부분)의 get, set에 사용한다.

  import { useSearchParams } from "react-router-dom";
  
   const [queryString, setQueryString] = useSearchParams();

    // 쿼리 가져올 때 (get)
   const search = queryString.get("search"); 
      // localhost:3000?search=value 의 쿼리의 search에 해당하는 값(value)을 가져올 수 있음 

    // 쿼리 설정할 때 (set)
   <button onClick={() => setQueryString(`search=allie`)}>
      // localhost:3000?search=allie 로 쿼리 설정