230119 React 라우터 useNavigate()훅, Navigate컴포넌트

라우터의 부가적인 기능

 

2.useNavigate()훅 vs Navigate 컴포넌트

 

useNavigate() 훅

js의 history객체를 대신한다. -뒤로가기, 앞으로가기 등
이벤트에서 사용 -버튼 등과 연결해서 사용한다.

useNavigate훅은 특정 event가 발생할 때, url을 조작할 수 있는 함수를 제공한다.
-react v6에서 useHistory가 변화한 것. 똑같다.
-함수를 돌려준다.
-함수 안에 원하는 주소를 입력하면 된다.
- 1을 넣으면 앞으로가기, -1을 넣으면 뒤로가기.
태그 안에 함수를 바로 넣어도 됨

 

 

Header.js

import { Fragment } from "react";
import { Outlet, useNavigate } from "react-router-dom";
import styled from "./Header.module.css";

const Header = () => {
    //useNavigate훅-함수반환
    let nav=useNavigate();

    const goHome=()=>{
        nav('/')//경로
    }
    
    const goBack=()=>{
        nav(-1)//뒤로가기, +1은 앞으로가기
    }

    return (
        <Fragment>
            <header className={styled.wrap}>
                <h3>헤더파일</h3>
                <ul className={styled.wrap_list}>
                    <li>목록</li>
                    <li>목록</li>
                    <li>목록</li>
                </ul>
                <div>
                    <button onClick={goHome}>홈화면</button>
                    <button onClick={goBack}>뒤로가기</button>
                </div>
            </header>
            <section>
                {/* 헤더 하위의 라우터 표현 */}
                <Outlet />
            </section>

        </Fragment>
    )
}

export default Header;

-버튼의 이벤트로 useNavigate훅 사용.

-useNavigate훅은 함수를 반환하므로 받은 함수에 경로나 -1을 넣어 이동과 뒤로가기를 구현.

---

Navigate 컴포넌트

리다이렉트기능 -Navigate컴포넌트를 만나는 순간 사용됨
렌더링시에 사용 

<Navigate>컴포넌트는 렌더링 될 때 현재 위치를 변경한다.

useNavigate()훅과 비숫해보이지만 useNavigate훅은 렌더링과정!에 사용할 수 없다

(정말 사용하고 싶으면 useEffect훅 안에서. 단, 렌더링이 다 된 이후에 써야 함)

 

return구문을 만나기 전에 조건 등을 통해 넣는다. 그럼 렌더링과정에 결려서 동작한다.

태그에 replace속성으로 replace=(true)를 하면 기록을 남기지 않는다.
이 구문이 없으면 홈으로 돌아갔을 때, 뒤로가기를 누르면 다시 마이페이지에서 Navigate를 만난다. 뒤로가기가 무한루프임.

 

App.js에서

  {/* navigate컴포넌트 */}
<Route path="/mypage" element={<MyPage/>}/>

 

Home.js에서

   {/* navigate컴포넌트 */}
<li><Link to="/mypage">마이페이지</Link></li>

 

 

Mypage.js

import { Navigate/* , useNavigate */ } from "react-router-dom";

const MyPage=()=>{

    /*
    첫번째 렌더링 과정에서는 사용할 수 없음
    let nav=useNavigate();
    let loginYN=false; //로그인여부
    if(loginYN===false){
        nav('/');
    }
    */

    //권한이 없으면 리다이렉트
    //replace={true}를 설정하면 기록을 남기지 않는다.
    let loginYN=false;
    if(loginYN===false){
        return <Navigate to="/" replace={true}/>
    }


    return(
        <div>
            권한 있는 사람만 접근이 가능함.
        </div>
    )
}

export default MyPage;

마이페이지를 눌러도 페이지에 접근할 수 없다.

 

 

 

 

 

---

이외에 다양한 기능들은 구글링할것

Next.js프레임워크를 사용하면 리액트(csr)을 ssr로 바꾸는게 가능.
Next.js는 서버 사이트 렌더링, 
정적 웹 페이지 생성 등 리액트 기반 웹 애플리케이션 기능들을 가능케 하는 Node.js 위에서 빌드된 
오픈 소스 웹 개발 프레임워크이다.