[React] React-router-dom V6 업데이트 관련 유의사항

1. react-router-dom V6 업데이트

react-router-dom package가 version6로 update되면서 많은 부분이 달라졌다.

업데이트를 체감한 부분 중, 그 중에서도 달라진 부분은 아래 두가지와 같다.

• Routing component를 구성하는 방법

• Link to에서의 props 전달 불가

특히 component 간 props 인자, 즉 data 전달이 불가능해졌고 이에 따라 hooks(useContext) 및 별도 저장소를 이용해야만 하는 점이 특징이다.

2. Routing component 구성

Routing component를 구성하는 방법이 달라졌다.

기존

기존에는 BrowserRouter를 최상위 Routing component로 위치시켰다.

그 이후에 Route component를 작성하여 routing 구조를 구성하였다.

import React from 'react'
import {BrowserRouter, HashRouter, Route} from 'react-router-dom'

import About from './router/About'
import Home from './router/Home'
import Detail from './router/Detail'
import Navigation from './component/Navigation'

function App() {
  return (
    <BrowserRouter>
      <Navigation />
      <Route path="/" exact={true} component={Home} />
      <Route path="/about" component={About} />
      <Route path="/movie/id::id" component={Detail}/>
    </BrowserRouter>
  )
}

export default App;

변경

변경된 방법에서는 Routing component를 Routes component 하위 계층으로 위치시켜야 하며, Routes는 Routing component에 대한 상위 항목으로 있어야 한다.

BrowserRouter를 최상위 component로 구성하는 것은 동일하다.

또한 Routing을 구성하는 요소가 component에서 element로 바뀌었다.

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from '../routes/Home.js';
import Detail from '../routes/Detail.js';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" exact={true} element={<Home/>} />
        <Route path="/:userID" element={<Detail/>}/>
      </Routes>
    </Router>
  );
}

3. Link to 에서의 props 전달 불가

더이상 Link to 를 통해 state/props 전달은 할 수 없다.

기존

Link to를 이용하면 state 인자에 전달할 data를 넣을 수 있었다.

import React from 'react'
import { Link } from 'react-router-dom'

function Navigation(){
    return(
        <div>
            <Link to ='/'>Home</Link>
            <Link to ={{
                pathname: '/about',
                state: {fromNavigation: true}
            }}>About</Link>
        </div>
    )
}

export default Navigation

이후 data를 받는(도착한) component에서는 props 인자를 통해 data를 받아오고, 이를 통해 component 간 data routing이 가능하였다.

import React from "react"

function About(props){
    console.log(props)
    return (
        <div className="about_container">
            <span>Hello! This is AboutPage!</span>
        </div>
    )
}

export default About

변경

component 간 props/state 인자를 통해 data 전달을 한 기존 react-router-dom의 Link to 기능은 더이상 사용할 수 없게 되었다.

이에 따라 전달할 data를 웹스토리지에 임시저장하거나, 별도의 server 및 함수를 통해 전달하는 등 별도의 매개장치를 통해 진행해야 한다.

단, pathname까지는 가능하다. data전달만 안되는 것으로 보인다.

4-1. localStorage을 활용할 경우

props 사용이 안됨에 따라 data를 보관할 임의의 장소가 필요, 이에 대한 방안으로 localStorage를 활용해보았다.

localStorage를 활용할 경우

아래와 같이 전달하고자 하는 data를 localStorage에 보관하도록 설정하였다.

const saveStateValues = (userID, userPW) => {
        localStorage.setItem(userID, userPW);
    };

input을 통해 입력받은 data는 userID, userPW에 저장되어 localStorage에 최종 보관된다.

            <Title>사용자 로그인</Title>
            <UserInformation>
                <input type='text' placeholder="ID" value={userID} onChange={updateUserID}/>
                <input type='password' placeholder="PW" value={userPW} onChange={updateUserPW}/>
            </UserInformation>
            <Link to={{
                pathname: `/${userID}`
            }} onClick={() => saveStateValues(userID, userPW)}>로그인하기</Link>
        </Container>

localStorage에 저장되어있는 key, value 값을 이용하여 data를 확보할 수 있다.

const userPW = localStorage.getItem(userID);

4-2. URL주소에 data를 포함할 경우

URL 주소에 data를 포함한다면, useParams() hook을 통해 data를 확보할 수도 있다.

const {userID} = useParams();

4-3. useContext hook을 활용할 경우

react-router-dom 업데이트 내용을 보았을때 점차 react가 functional programming 중심으로 바뀌고 있고, 이에 따라 hook 활용이 중요해질것으로 보인다.

useContext hook이 지금에서는 가장 활용도가 높은 방안일 것으로 보이는데, 이 경우 모든 logic을 손봐야하기 때문에 더 고민해볼 필요가 있다.

5. 참조링크

useParams
https://0strich.tistory.com/37

Remove <Link> component props
https://reactrouter.com/docs/en/v6/upgrading/v5#remove-link-component-prop

react-router-dom V6 업데이트 관련
https://velog.io/@ksmfou98/React-Router-v6-%EC%97%85%EB%8D%B0%EC%9D%B4%ED%8A%B8-%EC%A0%95%EB%A6%AC
https://velog.io/@soryeongk/ReactRouterDomV6