[React] useNavigate Hook으로 페이지 이동하기(Hook 직접 만들기)

A에서 B, C / B에서 A, C / C에서 A, B 로 갈 수 있도록 구현

React Hook는 함수형 컴포넌트에서 상태값 접근과 자식 요소에 접근이 가능하게 해줍니다.

리액트는 useState, useEffect 같은 내장 Hook을 제공해주는데, 이 중 useNavigate를 사용해서 페이지를 이동해볼게요~!

 

저는 Hook을 직접 만들건데, 한 함수형 컴포넌트 내에서 useNavigate()를 선언하여 사용할 것입니다.

=> 이렇게 하는 이유는 맨 밑에서 소개 드리겠습니다!

 

 

 

00. useNavigate

---

usePage 라는 함수형 컴포넌트를 만들어 사용하겠습니다.

usePage.js

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

function usePage() {
  /** 페이지 이동 hook */
  const navigate = useNavigate();

  return ;
}
export default usePage;

 

 

01. 페이지 이동 함수에 url인자 보내기

---

첫 번째 인자로는 주소를 받습니다.

 

usePage.js

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

function usePage() {
  /** 페이지 이동 hook */
  const navigate = useNavigate();

  const handlePage = (url) => {
    navigate(url);
  };

  return {
    handlePage
  };
}
export default usePage;

A.js

import * as React from "react";
import usePage from "./usePage";

export default function A() {
  /** usePage에 있는 handlePage 를 가져오기 */
  const { handlePage } = usePage();
  
  return (
    <div>
      <h1>(A) 페이지</h1>
      <button onClick={() => handlePage("/b")}>(B)로 가기</button>
      <button onClick={() => handlePage("/c")}>(C)로 가기</button>
    </div>
  );
}

(B.js와 C.js 도 A.js 와 비슷하게 구현)

 

 

 

🔥 02. 페이지 이동 함수에 url인자 안 보내고, 미리 url설정해놓기 🔥

---

저는 이 방법을 추천드립니다!✨✨✨

01(페이지 이동 함수에 url인자 보내기)번 같은 경우에도, 일일이 인자를 넣어줘야 하는 불편함이 남게 됩니다.

특히나, url에 매개변수가 있는 경우엔 더더욱이요!!!

(-> 근데, 상황따라 다르긴 하겠죠 하핫)

 

usePage.js

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

function usePage() {
  /** 페이지 이동 hook */
  const navigate = useNavigate();

  const handlePageA = () => {
    navigate("/a");
  };
  const handlePageB = () => {
    navigate("/b");
  };
  const handlePageC = () => {
    navigate("/c");
  };

  return {
    handlePageA,
    handlePageB,
    handlePageC
  };
}
export default usePage;

A.js

import * as React from "react";
import usePage from "./usePage";

export default function A() {
  const { handlePageB, handlePageC } = usePage();
  return (
    <div>
      <h1>(A) 페이지</h1>
      <button onClick={handlePageB}>(B)로 가기</button>
      <button onClick={handlePageC}>(C)로 가기</button>
    </div>
  );
}

(B.js와 C.js 도 A.js 와 비슷하게 구현)

 

+ 추가로, 이렇게도 할 수 있어요! (이거 진짜 편해요) 🌞🌞🌞

import * as React from "react";
import usePage from "./usePage";

export default function A() {
  const { handlePageB : hB, handlePageC : hC } = usePage();
  return (
    <div>
      <h1>(A) 페이지</h1>
      <button onClick={hB}>(B)로 가기</button>
      <button onClick={hC}>(C)로 가기</button>
    </div>
  );
}

위의 예시처럼, handlePageB 을 hB 라고 이름을 명시해서 사용할 수 있습니다.

 

 

 

+ 03. 뒤로 가기, 이전 페이지 못 돌아가게 하기

---

• 첫 번째 인자인 주소 자리에, -1 같은 숫자를 넣으면 그 숫자만큼 페이지를 이동합니다.
  => -1 : 뒤로 1 페이지 가기, 1 : 앞으로 1 페이지 가기
• 두 번째 인자로 { replace, state } 인수를 사용합니다.
  => true : navigate에 적힌 주소로 넘어간 후 뒤로가기를 해도, 방금 페이지로 돌아오지 않습니다.
  => false : 뒤로가기가 가능합니다. (기본값)

 

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

function usePage() {
  /** 페이지 이동 hook */
  const navigate = useNavigate();

  /** 뒤로 가기 */
  const backPage = () => {
    navigate(-1);
  };
  
  /** 이전 페이지 못 돌아가게 하기 */
  const backPageReplace = () => {
    navigate( url주소 , { replace: true });
  };

  return {
    backPage,
    backPageReplace
  };
}
export default usePage;

 

 

 

 

그래서, 저는 한 함수형 컴포넌트 내에서 useNavigate()를 선언하여 사용할 것입니다. 의 이유는요????

=> 중복 코드를 막을 수 있는 방법이라고 생각해서요!

 

 

위와 같이 구현할 수 있는 여러 가지 방법 중, 아래와 같은 코드를 볼까요?

 

Router.js

import { BrowserRouter, Routes, Route } from "react-router-dom";
import A from "./A";
import B from "./B";
import C from "./C";

const AppRouter = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/a" element={<A />} />
        <Route path="/b" element={<B />} />
        <Route path="/c" element={<C />} />
      </Routes>
    </BrowserRouter>
  );
};

export default AppRouter;

A.js

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

export default function A() {
  /** 페이지 이동 hook */
  const navigate = useNavigate();

  function handlePageB() {
    navigate("/b");
  }
  function handlePageC() {
    navigate("/c");
  }

  return (
    <div>
      <h1>(A) 페이지</h1>
      <button onClick={handlePageB}>(B)로 가기</button>
      <button onClick={handlePageC}>(C)로 가기</button>
    </div>
  );
}

B.js

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

export default function B() {
  /** 페이지 이동 hook */
  const navigate = useNavigate();

  function handlePageA() {
    navigate("/a");
  }
  function handlePageC() {
    navigate("/c");
  }

  return (
    <div>
      <h1>(B) 페이지</h1>
      <button onClick={handlePageA}>(A)로 가기</button>
      <button onClick={handlePageC}>(C)로 가기</button>
    </div>
  );
}

C.js

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

export default function C() {
  /** 페이지 이동 hook */
  const navigate = useNavigate();

  function handlePageA() {
    navigate("/a");
  }
  function handlePageB() {
    navigate("/b");
  }

  return (
    <div>
      <h1>(C) 페이지</h1>
      <button onClick={handlePageA}>(A)로 가기</button>
      <button onClick={handlePageB}>(B)로 가기</button>
    </div>
  );
}

각각 함수형 컴포넌트 내에서 useNavigate Hook을 불러서 사용하게 되면, 중복 코드가 많이 생겨버립니다..!

const navigate = useNavigate();도 일일이 써줘야겠네요. 🤔🤔

 

따라서, 한 함수형 컴포넌트 내에서 사용하는 건 어떨까요~~

 

 

✨중복 코드는 힘들어용✨