📚 react router additional Hook & Component

이전 포스팅에서 react router에서 주로 사용되는 컴포넌트 및 기술들을 알아보았다.

주로 사용하는 것뿐만 아니라 react router로 여러 가지 기능을 구현할 때 필요한 훅이나 컴포넌트들이 있다.

본 포스팅에서는 부가적인 훅과 컴포넌트에 대해 알아보겠다.

📚 Hook & Component

react router에서 프로그랭밍적으로 경로 이동을 하는 방법은 두 가지가 있다.

• useNavigate
• Navigate

위 API들은 우리가 프로그래밍적으로 경로 이동을 하고 싶을 때 사용한다.

여기서 프로그래밍적이라는 것은 어떠한 로직을 구성하면서 경로 이동을 포함시키는 것이다.

Link나 NavLink와 같은 컴포넌트는 직관적으로 어떠한 경로로 이동하는 기능을 가진 컴포넌트이다.

하지만 useNavigate나 Navigate는 어떠한 로직을 구성할 때 사용자가 임의로 경로를 설정하여 유동적인 조작이 가능하다.

예를 들어 ,

• form을 제출한 다음 특정 경로로 이동하게 하기
• checkbox에 check를 하면 특정 경로로 이동하게 하기
• 정보를 알맞게 입력하여 완성하면 이동하게 하기

등으로 여러가지 상황에 맞춰 특정 경로로 이동하게 할 수 있다.

1. useNavigate(imperative)

userNavigate hook은 원하고자 하는 경로로 이동할 수 있게 해주는 함수를 반환해준다.
const navigate = useNavigate()
navigate("./home", { replace: true },{state : any});

• useNavigate는 version 6이전의 useHistory를 대체하여 만들어진 API이다.

• React Router's imperative API for programmatically navigating.

use

• 이전 페이지나 다음 페이지로 이동 가능 (index활용)
• 특정 경로로 이동

useNavigate hook은 원하고자 하는 경로로 이동할 수 있게 해주는 함수를 반환해준다.

const navigate = useNavigate()


첫 번째 인자로는 이동하고자 하는 경로를 할당해준다.
인덱스를 할당해주면 이전 페이지(-1)나 다음 페이지(1)로 이동할 수 있다.

navigate("/dashboard") //specific route
navigate(-1) //back
navigate(1) //next

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

const LayOut = () => {
  const navigate = useNavigate();

  return (
    <div>
      <h1>Home</h1>

      <button
        onClick={() => {
          navigate("/dashboard");
        }}
      >
        Submit
      </button>
      <button
        onClick={() => {
          navigate(-1);
        }}
      >
        Prev
      </button>
      <button
        onClick={() => {
          navigate(1);
        }}
      >
        Next
      </button>
      <Outlet />
    </div>
  );
};

export default LayOut;

submit 버튼을 클릭하면 dashboard경로로 이동할 수 있다.
Prev 버튼을 클릭하면 이전 경로로, Next 버튼을 클릭하면 다음 경로로 이동할 수 있다.

이전 경로와 다음 경로를 navigate()의 인수로 index를 할당해줄 수 있다.

바로 이전 경로 (-1)
바로 다음 경로 (1)

---

두 번째 인자는 선택적 옵션이다.

두 가지 옵션을 사용할 수 있는데 state, replace 이다.
{ replace?: boolean; state?: any }
navigate("/dashboard" {replace : true},{state:any})

state

Location State - A value that persists with a location that isn't encoded in the URL. Much like hash or search params (data encoded in the URL), but stored invisibly in the browser's memory. by location react router official Docs

• state : state 값을 할당해주면 해당 경로로 이동하였을 때, location.state값을 전달받을 수 있다.
  
  

예를 들어, login > setting으로 이동하였을 때, navigate("/setting")을 사용했다고 가정해보자.

이 때 login 페이지의 특정값을 사용하고 싶다면 state로 전달해줄 수 있다.
navigate("/setting",{state:{id:myid,pw:mypw}})

위와 같이 state값을 전달해주면 setting에서 location으로 조회하여 state값을 사용할 수 있다.

replace

• replace : hisory stack에 현재 경로를 쌓이게 하지 않는다.
  때문에 이전 페이지로 돌아간다면 전 경로로 돌아가게 된다.

예를 들어, home > dashboard > login > setting 순으로 페이지 이동을 했다고 가정해보자.

이 때 login 페이지에서 setting 페이지로 이동하기 위해서 login 컴포넌트 내에서 navigate("/setting")을 사용한다.

replace 속성을 할당하지 않으면 로그인을 한 뒤에 setting에서 뒤로가기를 누르면 다시 로그인 페이지로 돌아간다.

하지만 로그인을 하고 나서 로그인 페이지로 돌아갈 필요가 없다.

이럴 때 login페이지에서 navigate("/setting",{replace:true})처럼 replace를 할당해주면 로그인을 한뒤에 setting 페이지에서 뒤로가기를 눌러도 로그인 페이지가 아닌 이전 dashboard페이지로 돌아가게 된다.

때문에 replace 속성은 현재 페이지를 history stack에 쌓지 않고 이전 페이지로 대체하고 싶을 때 사용하면 된다.

---

2. Navigate(declartive)

Navigate 컴포넌트는 렌더가 되면 특정 경로로 이동하게 해준다.
<Navigate to="/login" replace />

• React Router's declartive API for programmatically navigating.

useNavigate와 달리 함수로 경로이동을 하는 것이 아닌 컴포넌트로 경로이동을 한다.
Navigate는 보통 조건에 따라 특정 경로로 이동하고 싶을 때 사용한다.

예를 들어, authed라는 로그인 상태를 나타내는 state가 있다고 하자.
const [authed,setAuthed] = useState(false)

이 때 authed가 false면 로그인 컴포넌트로 이동하게 하고 싶다고 하자.
{!authed && <Navigate to="/login"/>}

이러한 코드로 authed가 true가 되면 해당 컴포넌트가 렌더되게 하고 authed가 false면 login 컴포넌트로 이동할 수 있게 하는 방법으로 사용할 수 있다.

replace

useNavigate의 replace 속성처럼 선택적으로 필요할 때 사용해주면 된다.

useNavigate or Navigate?

useNaviagte는 imperative API이고 Navigate는 declartive API이다.

Imperative? Declartive?
Imperative는 직관적인 성향이다.
조건없이 기능을 실행할 수 있도록 한다.

Declartive는 서사적인 성향이다.
특정 조건에 따라 어떠한 기능을 실행할 수 있도록 한다.

useNavigate(Imperative) Navigate(declartive)
useNavigate는 Imperative Navigating API이다.
이 말인 즉슨 , 특정 조건 없이 경로 이동을 할 수 있다는 것이다.

예를 들어, state를 기반으로 컴포넌트를 렌더하여 이동하게 할 수 있지만 useNavigate는 state를 쓰지 않고도 기능을 실현할 수 있다.

Navigate는 Declartive navigating API이다.
이는 특정 조건을 기준으로 기능을 실행할 수 있도록 한다.

Declartive는 React가 주장하는 핵심 원리 중 하나이다.

by 리액트 공홈

React will efficiently update and render just the right components when your data changes

• 리액트는 data가 바뀜에 따라 컴포넌트를 업데이트해준다.
  Declarative views make your code more predictable and easier to debug.
• Declarative view는 코드를 예측가능하고 오류를 잡아내기 쉽게 해준다.

React는 state를 기반으로 하여 컴포넌트를 렌더해준다.
React router의 Navigate도 React의 원칙처럼 Declartive하게 즉, state 변화에 따라 Navigate를 렌더해줄 수 있게 한다.

React에서 state를 기반으로 컴포넌트를 렌더링해주는 것처럼 Navigate도 state를 기준으로 Navigate라는 컴포넌트를 보여주는 것이다.
(반드시 그런 것이 아니라 그러한 로직으로 구성하는 것)

리액트에서 제시하는 이점처럼 어떠한 상태에 따라 컴포넌트를 업데이트 해준다는 것은 코드가 논리가 있고 추적하기가 쉽다라는 것을 얘기하는 것 같다.

useNavigate는 어떠한 이벤트를 발생시켰을 때라던지 등 어떠한 기능을 발생시켰을 때 사용하고,Navigate는 컴포넌트가 렌더가 됬을 때 경로 이동을 하고 싶으면 사용하면 된다.

코드 문맥에 따라 둘 중에 골라 사용하면 될 것 같다.
조금 더 직관적으로 사용하고 싶다면 useNavigate Hook을 , React스럽게 navigating하고 싶다면 Navigate 컴포넌트를 사용하면 되겠다.

참조 : How to Programmatically Navigate with React Router

3. useLocation

The useLocation() hook provides us access to the browser's location object.

• useLocation hook은 location object에 접근하게 해준다.

location object란 무엇일까?

location란?

• The browser has a location object on window.location. It tells you information about the URL but also has some methods to change it:
• This is a React Router specific object that is based on the built-in browser's window.location object.
  It represents "where the user is at". It's mostly an object representation of the URL but has a bit more to it than that.
  by location react router official Docs

location object는 window.location을 기반으로 한 객체이며 url에 대한 정보뿐만 아니라 변경할 수 있는 메서드 등의 기능들을 가지고 있는 객체이다.

window.location은 react router에서 사용할 수 없기 때문에 이를 더 간편하게 사용할 수 있도록 location API를 사용할 수 있게 해준다.

location object는 다음과 같은 형태를 띄고 있다.

location object

{
  pathname: "/bbq/pig-pickins",
  search: "?campaign=instagram",
  hash: "#menu",
  state: null,
  key: "aefz24ie"
}

{ pathname, search, hash }은 window.location의 기능과 똑같다.
세 가지 기능을 조회하면 URL에 대한 정보를 얻을 수 있다.

{state, key}는 특수하다.

pathname

URL의 기본 경로 뒤에 오는 주소이다.
https://example.com/teams/hotspurs 라는 URL이 있을 때 /teams/hotspurs가 pathname이다.

search

location.search, search params,URL search params , query string으로 다양한 용어로 사용된다.

react router에서는 location.search로 사용된다.
URL 뒤에 query를 가져올 때 사용된다.

https://example.com/teams/hotspurs?campaign=instagram에서
query => ?campaign=instagram

hash

서버에 요청하지 않고 URL을 조작할 수 있는 부분이지만 오늘날에 원하는 스크롤 위치로 보내는 등 디자인 적인 요소로 많이 사용하고 있다.
https://example.com/#hash =>#hash

state

state는 해당 location에 들어갔을 때의 상태값을 말한다.

이는 본래 history.state로 설정 및 조회하지만 react router에서 해당 기능을 사용할 수 없다.

때문에 react router에서는 state를 location object에서 조회할 수 있도록 했다.

state는 url에 표시되지않아 url에 대한 정보를 보안적으로 공유할 수 있다.
state는 주로 다음 경로로 이동하였을 때 이전 경로의 data를 전달할 경우에 많이 쓰인다.

state는 Link나 navigate(from useNavigate)에서 사용된다.

<Link to="/pins/123" state={{ fromDashboard: true }} />;

let navigate = useNavigate();
navigate("/users/123", { state: partialUser });

그리고 다음 페이지에서 해당 state를 조회할 수 있다.

let location = useLocation();
location.state;

key

각 페이지 location은 고유한 key를 가지고 있다.

useLocation

따라서 위와 같은 location 기능들을 사용하기 위해선 useLocation hook을 사용하면 된다.

useLocation은 해당 페이지에 대한 location 객체를 불러와준다.

const location = useLocation

위에서 봤던 것과 같이 location을 조회하여 여러 가지 기능들을 사용할 수 있다.