[React] React-router에서 유용한 Hook과 Component

React-router는 각각의 url에 따라 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리이다.

이때 사용하는 유용한 hook과 component들을 정리해보자

 

<Link>

사용자가 클릭하거나 탭하여 다른 페이지로 이동할 수 있게 해주는 요소이다.

원래 웹페이지 에서는 링크를 보여줄 때 <a>태그를  사용하지만 a태그는 클릭시 페이지를 불러오기 때문에 사용하지 않는다. 

<Link>컴포넌트는 생김새는 <a>태그를 사용하지만 History API를 통해 브라우저 주소의 경로만 바꾸는 기능이 내장되어 있다.

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

해당 컴포넌트에 import를 해주고 

<Link to={경로}>링크명</Link>

 

단순히 클릭하면 바로 페이지를 이동할 때는 Link를 써주면 편하다

 

하지만 조건문이 들어가야 하거나 함수 안에 써야할 때(추가로 처리해야 하는 로직이 있을 경우)는 useNavigate hook으로 이동할 수 있다.

 

useNavigate

useNavigate 훅을 실행하면 페이지 이동을 할 수 있게 해주는 함수를 반환한다.

반환하는 함수를 navigate라는 변수에 저장후에 navigate의 인자로 설정한 path값을 넘겨주면 해당 경로로 이동할 수 있다.

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

const Login = () => {
    const navigate = useNavigate();
    const loginUser = () => {
    	navigate('/');
    }
    return (
        <div>
            <button onClick={loginUser}>
                로그인
            </button>
        <div>
    );
}

예를 들면 loginUser()에서 로그인을 한 유저를 확인해주는 state를 저장을 해주거나 회원가입 유무를 확인하는 로직이 들어 갈 수 있다.

이렇게 추가적인 로직을 필요로 할 때에는 useNavigate 훅을 사용한다.

 

- Link와 useNavigate의 차이점 및 활용법 정리

1. Link

• 클릭 시 바로 이동하는 로직 구현 시에 사용
• ex) 상품 리스트에서 상세 페이지 이동시

2. useNavigate

• 페이지 전환 시 추가로 처리해야 하는 로직이 있을 경우 useNavigate 사용
• ex) 로그인 버튼 클릭 시
  • 회원가입 되어 있는 사용자 -> Main 페이지로 이동
  • 회원가입이 되어 있지 않은 사용자 -> SignUp 페이지로 이동

참고 : https://velog.io/@seokkitdo/React-Link-useNavigate

 

<Navigate>

<Navigate> 컴포넌트는 useNavigate 훅이랑은 다르기 때문에 잘 기억하고 있어야 한다.

 

Navigatae는 redirection을 해주는 Component이다.

길을 잘...가다가 방향을 확!!! 바꿔주는 것이다...

 

예를 들어 

1. 쇼핑몰 웹페이지이다.

2. 맘에 드는 상품을 클릭하면 제품 상세 페이지가 나온다.(하지만 로그인을 해야 볼 수 있다)

3. 만약 로그인을 한 상태라면, 제품 상세 페이지로 넘어간다.

4. 로그인 상태가 아니라면, 로그인페이지로 redirection한다.

const PrivateRoute = ({authenticate}) => {
  return authenticate == true ? <ProductDetail/> : <Navigate to="/login"/>
}

 

useParams

리액트 라우터를 사용할 때 파라미터 정보를 가져와 활용하고 싶을 때 사용한다.

import React from 'react';
import { useParams } from 'react-router-dom';

const Test = () => {
    let { params } = useParams();
    
    return (
    	<div>
            <p>현재 페이지의 파라미터는 { params }</p>
        </div>
    );
}

"~url~/test/1"에서 파라미터가 1이므로 "현재 페이지의 파라미터 1"라고 출력된다.

 

useSearchParams

리액트 라우터를 사용할 때 쿼리 정보를 가져와 활용하고 싶을 때 사용한다.

import React from 'react';
import { useSearchParams } from 'react-router-dom';

const Test = () => {
    const [query, setQuery] = useSearchParams();
    let searchQuery = query.get('q') || "";
	return (
    	<div>
            <p>현재 페이지의 쿼리는 {searchQeury}</p>
        </div>
    );
}

 

"~url~/test/1?q=yong"에서 쿼리값은 "yong"이기 때문에 "현재 페이지의 쿼리는 yong"라고 출력된다.