2022.03.15 TIL - useNavigate, useLocation, useParams

velog에서는 js까지만 정리를 했지만 그동안 node.js, react를 배웠고 프로젝트가 시작됐다.
오늘은 프로젝트 대비 react 공부!

---

useNavigate

특정 이벤트 발생시 url을 조작할 수 있는 interface를 제공한다.

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

function Func() {
  const navigate = useNavigate();

  const onClickImg = () => {
    navigate(`/comment/id/등등 내가 원하는 주소`);
  };

  return (
  	<img src={...} alt={...} onClick={onClickImg} />
  );
}

export default Func;

• navigate('/about', {replace: true}); navigate는 첫번째 인자로는 url, 두번째 인자로는 {replace} 인수를 받는다. replace() 값으로 true를 사용하면 navigate에 적힌 주소로 넘어간 후 뒤로가기를 하더라도 종전 페이지로 돌아오지 않고 메인 페이지(’/’) 로 이동한다. default값은 false로 뒤로가기가 가능하다.
  
• useHistory → useNavigate useNavigate는 react-router-dom V6에서 새로 생긴 함수로 기존의 useHistory기능을 전부 대체할 수 있다. useHistory의 history는 객체, useNavigate의 navigate는 함수이다!

  // v6
  const navigate = useNavigate();
  
  navigate('/home');
  navigate('/home', {replace: true});
  navigate(-1); // 뒤로가기
  navigate(1); // 앞으로 가기

useLocation

사용자가 현재 머물러 있는 페이지에 대한 정보를 알려주는 hook!

• pathname, search

[http://loacalhost:3000/home?keyword=1](http://loacalhost:3000/home?keyword=1) 

위와 같은 url이 있을 경우 **pathname**은 쿼리스트링을 제외한 /home이 출력, **search**는 pathname이 출력했던 부분을 제외한 쿼리스트링이 출력되며 결과는 ?keyword=1이 출력된다. 

useParams

useParams는 URL 인자들의 key/value(키/값) 짝들의 객체를 반환한다. 현재 의 match.params에 접근하기 위해 사용한다.

1. router.js에서 id 값을 지정해준다.

```jsx
router.js
<Route path="/detail/:id" element={<Detail />} />
```

2. useParams hook 지정

   Detail.js
   import{ useParams } from 'react-router-dom;

3. 컴포넌트 내 useParams()선언

   const Detatil = props => {
   	return (
   		const params = useParams();
   }

4. fetch 함수에서 useParams를 선언했던 변수 입력

   useEffect(() => {
   	fetch(`${API}/${params.id}`)
   		.then(res => res.json())

추가로 새로 알게 된 부분!

!! 가 두개 붙어 있는 경우가 있어서 뭔가 했는데 js에서 확실한 논리 결과를 얻기 위해 사용하는 연산자라고 한다.

역의 역으로 true → false → true 로 똑같지만 undefined나 null 값을 false로 형변환하는데 사용할 수 있다고 한다.