[react] hook 배운 것들 정리

jungmin kim·2021년 12월 27일
0

React_nomad

목록 보기
24/24

1. useForm

useForm은 쉽게 form을 관리하기 위한 훅이다.

2. React Router 관련 hook

1) useHistory

: gives you access to the history instance that you may use to navigate.

2) useLocation

: returns the location object that represents the current URL

3) useParams

: URL 매개변수의 키/값 쌍의 개체를 반환

import React from "react";
import ReactDOM from "react-dom";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  useParams
} from "react-router-dom";

function BlogPost() {
  let { slug } = useParams();
  return <div>Now showing post {slug}</div>;
}

ReactDOM.render(
  <Router>
    <Switch>
      <Route exact path="/">
        <HomePage />
      </Route>
      <Route path="/blog/:slug">
        <BlogPost />
      </Route>
    </Switch>
  </Router>,
  node
);

https://v5.reactrouter.com/web/api/Hooks/useparams

4) useRouteMatch

: 실제로 렌더링하지 않고 일치하는 url에 엑세스. 해당하는 url맞는지 판별
페이지 내 탭 메뉴 접근에 활용.
https://v5.reactrouter.com/web/api/Hooks/useroutematch

React Router hook 관련 Doc: https://v5.reactrouter.com/web/api/Hooks

0개의 댓글