[React 숙련] 리액트 hook : useNavigate | useLocation | useParams | Link (api)

1. useNavigate (활용도 높은 페이지 전환 hook)

▶  어떤 버튼 클릭 / 액션이 있을 때 페이지 이동 ( <a>태그의 href와 유사 역할 )

import React from 'react';

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

function Home() {

    const navigate = useNavigate();

    return (

        <div>

            Home <br />

            <button

                onClick={() => {

                    navigate('/works');

                }}

            >

                works로 이동

            </button>

        </div>

    );

}

export default Home;

 

▶useNavigate(); 사용해서 버튼 클릭시 navigate('/works')

 

 

2. useLocation (hook)

import React from 'react';

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

function Works() {

    const navigate = useNavigate();

    const location = useLocation();

    console.log(location);

▶ 현재의 위치나 정보가 들어가 있음 : 이 페이지 안에서 조건부 랜더링이 가능 (심화과정에서 많이 사용함)

 

3. Link (api)

<Link to="/contact"> contact 페이지로 이동하기</Link>

▶ <a>태그의 기능 대체하는 api 

▶ jsx에서는 a태그 사용시 페이지 이동하면서 새로고침 되기 때문에 link로 구현해야함!

(새로고침 : 리덕스 & useState는 모든 상태값이 초기화됨)

▶ <Link to=""> 로 사용해줘야함!

 

4. useParams (hook)

import React from 'react';

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

function Work() {

    const params = useParams();

    console.log('params', params);

    return <div>하위페이지입니다</div>;

}

export default Work;

[위치: Router.js] 

<Route path="works/:id" element={<Work />} />

▶ id값이 1을 확인 가능

▶ 현재 라우팅 페이지에서 넘어온 파라미터 값 알 수 있음. 

 

5. children 용도

▶ <ParentComponent> { props.children } </ParentComponent> 

▶ 공통 헤더, 네비게이션, 푸터 사용할 때 자주 사용함.