React - Router [ action , loader ]

React - Router [ action , loader ]

 

 

 

 

React Router는 URL과 UI를 연결하여 사용자에게 어떤 컴포넌트를 보여줘야 할지를 정의하고

SPA 형식을 구현하기 편리하고 하나의 컴포넌트 내에서 NavLink ,LINk 컴포넌트를 사용하여 한 컴포넌트안에서

어플리케이션의 이동방식의 정의, 해당 path에 맞는 컴포넌트 연결을 보다 쉽게 컨트롤 할 수 있게 하는 라이브러리이다.

 

 

 

BrowerRouter / HashRouter 의 차이점

Router에서 Url를 컨트롤 하는 방식으로 BrowserRouter, HashRouter를 많이쓰이는데

둘다 지정된 'path'에 따라 정의된 컴포넌트를 보여주는 것은 동일하다.

 

#BorwerRouter는  예) ' Url/about '  형식으로 클라이언트에서 현재 Url의 뒤의 about에 맞는 컴포넌트를 연결해주며,

보다 깨끗한 URL을 구현하고 추가적인 서버연결을 통해서 동적인 CSR , SPA 형식의 웹을 구현할 수있다.

 

#HashRouter는 Url에 #로 구분을 하며 BrowerRouter에서 'Url/about'을 요청한다면 hash는 'Url/#/about' Url만 서버에 요청하게 되고 해쉬(#)뒤의 path는 Url 요청 이후에 javasciprt로 매핑을 한다. 

 

즉 둘의 차이는 서버와 상호작용의 차이라고 볼 수 있으며 CSR형식으로 동일하다.

애초에 CSR형식은 서버 요청 이후 javasciprt로 데이터를 호출하기에 SEO에 불리하다. hash방식은 거기에서 해시 전의 url만 요청하고 해시 부분은 무시될 수가 있기에 SEO에 더 불리 할 수 밖에 없다.

 

 

 

Router 구성

1) js 패키지를 통해 설치

yarn add react-router-dom

npm install react-router-dom

 

 

2) 사용방법

import './App.css';

// Rounter Provider 공급자, createBorwer 설정
import { createBrowserRouter , RouterProvider  } from 'react-router-dom';
const router = createBrowserRouter([
  {
    path : '/', //기본 path 
    element : <RootLayout/>, //RootLayout을 생성하여 공유되는 Nav 정의
    id : 'auth',// 하위 컴포넌트에서 사용할 수있도록 Id 지정
    action : tokenCheckAction, // 서버로 요청할 수 있는 action 설정
    children : [
        { index : true , element : <HomeComponent/> }, // '/' root path에서 사용할 컴포넌트

        // Project
        {
          path : '/project', // path
          element : <MyProject/>, // component
        }
    ]
  }
])



function App() {
  return (
  		//Router 공급자 설정 
        //Router에 삽입된 컴포넌트들에게 {router} 컴포넌트에 prop 전달
        <RouterProvider router={router}/>
  );
}

export default App;

 

 

v6이후로 도입된 문법으로 객체형식의 Router방식 이다. 

이 전의 'switch' 형식보다 좀 더 객체형식으로 그룹화 되어 있기에 구분하여 확인하기 편리하며 'action', 'loader'를 사용하여 필요한 데이터 로직을 공유하거나 서버에 요청하는 로직을 재 선언 할 필요 없이 재 사용 할 수 있음으로 

사용 성을 대폭 증가 시킨다.

 

 

action, loader?

Action과 loader는 같은 로직을 매 번 선언하지 않아도 라우터 내의 컴포넌트 끼리 로직을 공유하여 사용 할 수 있도록

해주는 Router의 프로퍼티이다.

 

 

#action 

action은 formData 나 사용자가 발생시키는 이벤트를 전달하는 프로퍼티이다. 

사용법은 아래와 같다.

const router = createBrowserRouter([
  {
    path : '/', 
    element : <RootLayout/>,
    id : 'auth',
    action : tokenCheckAction, 
    children : [
        { index : true , element : <HomeComponent/> }, 

        // Project
        {
          path : '/project', // path
          element : <MyProject/>, // component
        }
    ]
  }
])

 

위와 같이 root path에 'tokenCheckAction' 이라는 사용자 정의 action을 기재하면 해당 하위 컴포넌트에서 

action을 사용이 가능하다.

 

예로 '/project' 의 <Myproject/>의 내에서

const action = useActionData('id');

 

위와 같이 useActionData훅을 사용하여 tokenCheckAction의 함수를 사용 할 수 있게 된다. 

 

 

 

 

#loader

loader는 페이지가 로드 하기전 먼저 실행이 되어 지는 프로퍼티이다.

참조 된 함수를 실행하여 예로 이 페이지에 맞는 권한이 주어진 사용자인지 판별하고 리다이렉트하거나 맞는 권한을 주기 위한 값을 판별 하기에 편리하게 사용된다. 

 

이도 Action과 비슷하게 사용되지만 사용되는 훅은

 

useLoaderData, useRouterLoaderData가 사용된다.

 

1) userLoaderData

식별자를 두지않는다면 가장 가까운 상위 loader를 가져오며, 하위 컴포넌트에서는 가져올 수 가 없다. 

이는 클로저 개념과 비슷하게 볼 수 있다. 

 

2) userRouterLoaderData 

식별자를 두지 않는다면 상위, 하위 컴포넌트중에 가장 가까운 loader를 가져오며 식별자를 선언한다면 라우터 내의 컴포넌트 중 어디에서도 loader를 가져와 사용 할 수 있다.

 

 

 

 

 

Router V6 버전의 차이

1) Switch에서 Routers로 대체

Switch에서 Routers로 변경되면서 더욱 더 정확한 매칭 알고리즘을 사용하여 시스템을 개선하였다.

객체형으로도 선언이 가능하여 가독성은 물론이고 중첩된 라우팅을 구현하기 편리해졌다.

 

export default function RootLayout(){
    return(
        <>
                <RootNav/>
                <Outlet/>   
        </>
    )
}

 

위와 같이 공통적으로 보여져야할 RootNav 컴포넌트와 react-router-dom에서 지원하는 Outlet 컴포넌트를 이용하여 

이동되어 져야 할 컴포넌트들을 중첩해서 보여주기 간편해졌으며

개발자라면 일반 div형식보다 []. {} 로 나뉘어져 있는 객체 형식이 좀더 가독성이 좋을 것이다.