[React] 리액트 라우터와 관련 Hooks 정리

 

- 라우터 개념이해 + Link 개념

- restful route 개념 이해

- react hook 중에서 useNavigate, useParams, useSearchParams이해

 

 

Route는 경로란 뜻이다. 웹페이지를 여러개 만들고, 이 각각의 웹페이지를 가기 위한 경로가 필요하다.

 

 

설치 명령어

npm install react-router-dom

 

 

BrowserRouter

다른 창의 URL에 대한 변경 사항을 추적하는 데 사용할 수도 있다

import * as React from "react";
import * as ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  root
);

 

 

Route

각각의 페이지를 라우터로 감싼다.

path에는 주소창에 쓸 경로, element에는 페이지 컴포넌트 입력

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

<Route path="/teams" element={<Teams />}>
  <Route path=":teamId" element={<Team />} />
</Route>

 

Link

앵커처럼 작동한다. 라우터 간 이동을 도와주는 링크라고 해석하면 된다.

 

function goAbout() {
  return (
    <Link to="/about">
      Go to about page
    </Link>
  );
}

 

useNavigate

() 안에 내가 가고 싶은 경로를 작성해준다.

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

function useLogoutTimer() {
  const userIsInactive = useFakeInactiveUser();
  const navigate = useNavigate();

  useEffect(() => {
    if (userIsInactive) {
      fake.logout();
      navigate("/session-timed-out");
    }
  }, [userIsInactive]);
}

 

 

Restful Routes

대표사진 삭제

사진 설명을 입력하세요.

 

useParams

'/' 로 이어진 모든 매개변수를 받아올 수 있는 성질을 이용하여 URL의 파라미터 값을 읽어올 수 있다.

import * as React from 'react';
import { Routes, Route, useParams } from 'react-router-dom';

function ProfilePage() {
  // Get the userId param from the URL.
  let { userId } = useParams();
  // ...
}

function App() {
  return (
    <Routes>
      <Route path="users">
        <Route path=":userId" element={<ProfilePage />} />
        <Route path="me" element={...} />
      </Route>
    </Routes>
  );
}

 

useSearchParams

쿼리값을 읽어올 수 있다.

import * as React from "react";
import { useSearchParams } from "react-router-dom";

function App() {
  let [searchParams, setSearchParams] = useSearchParams();

  function handleSubmit(event) {
    event.preventDefault();
    // The serialize function here would be responsible for
    // creating an object of { key: value } pairs from the
    // fields in the form that make up the query.
    let params = serializeFormQuery(event.target);
    setSearchParams(params);
  }

  return (
    <div>
      <form onSubmit={handleSubmit}>{/* ... */}</form>
    </div>
  );
}

 

 

 

 

기타 hooks들은 도큐먼트를 하나씩 읽으면서 적용해볼 수 있다 :)

 

 

 

설명

 

라우터는 '어떤 화면을 보여 줄지 관리해주는 친구'이다.

조금 더 정확하게 말하자면 '어떤 컴포넌트'를 '렌더링'할지 결정하는 역할을 한다.

(컴포넌트는 화면을 표현하기 위한 조각이다.)

 

 

 

 

 

Home v6.4.5

What's New in 6.4? v6.4 is our most exciting release yet with new data abstractions for reads, writes, and navigation hooks to easily keep your UI in sync with your data. The new feature overview will catch you up. I'm New Start with the tutorial. It will quickly introduce you to the primary feature...

reactrouter.com

 

React Router 도큐먼트

Home v6.4.5