React) React Router V6를 한번 써보기

여기가 강남이구나!

안녕하세요. 후르륵짭짭입니다.

요즘에 개인적으로 하고 싶은게 있어서 React를 공부하고 있습니다.

Web공부를 제대로 해본적이 없어서,,, CSS HTML에 익숙하지 않아서 공부할게 많더라구요 ㅎㅎㅎㅎ

React 공부한 걸 적어봐야지 마음은 먹었지만, 너무 간단한 것들이라 생각해서 안 올렸는데,

React Router Dom은 나름 쫌 알아야겠더라고요.

취미생활로 하는 글이다 보니 참고용으로 해주세요 ㅋㅋㅋㅋ

(IOS만 하다보니 기본적인 상식인 Web를 잘 못 하던거 반성 중 ㅠㅠ)

 

** Router Dom이란 ** 

Router Dom이란 URL의 링크에 따라 Component를 생성해주는 겁니다.

React는 SPA(single page application)입니다.

물론 하나의 URL 링크로 사용자에게 페이지를 보여줄 수 있습니다.

하지만 사용자가 특정 페이지로 이동하고 싶지만, 그럴수 없게 되죠.

이때 Router Dom을 사용하는 겁니다.

 

** 프로젝트 결과물 **

 

**  설치하기 및 라우터 시작하기 **

npm install react-router-dom@6

일단 해당 프로젝트로 들어가 위 커맨드를 통해 라우터를 설치해주세요.

그리고 Index.js(도입부)에서 아래와 같이 라우터를 사용하겠다고 알려줍니다.

BrowerRouter는 Router를 사용하겠다는 전체적인 Wrap과 같은 겁니다.

이때 중요한것이 Import에 'react-router-dom'을 해주셔야합니다.

import {BrowserRouter as Router} from 'react-router-dom'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Router> //BrowserRouter의 이름이 길어 Router라고 변경하여 사용
    <App />
  </Router>
);

 

** 링크 설정해주기 **

import { Routes, Route} from 'react-router-dom'

function router(){
    return (
            <Routes>
              <Route path="/" element={<Home name={"Home"}/>}/>
              <Route path="/about/*" element={<About/>}/>
              <Route path="/about/intro" element={<Content/>}/>
              <Route path="/about/intro/:userId" element={<Content/>}/>
              <Route path='profile/*' element={<Home name={"Profile"}/>}>
                <Route path='special' element={<Content />} />
              </Route>
              <Route path='*' element={<Error/>}/>
            </Routes>
    )
  }

위 코드를 보면 Routes와 Route가 있습니다.

Routes는 URL 주소의 바구니이고 Route는 URL 입니다. 

이 부분이 저는 가장 중요하다고 생각하는데, 프로젝트의 전체적인 구조를 확인 할 수 있다 생각해서 입니다.

   - 하나의 URL -

하나의 URL를 사용할 때는 <Route />에 path를 적어주고 element에 Component를 넣어주면 됩니다.

이때 중요한 것이 "하위 컴포넌트를 어떻게 사용할 것인가"에 대한 고찰이라고 생각합니다.

(초보자 React 개발하는것이지만,,,)

Route를 사용하면 하위 Component를 만들게 됩니다.

그리고 만약 중첩이라면 그 하위 Component에 또 Component를 생성하게 됩니다.

따라서 Component를 어떻게 사용할지에 대한 생각에 따라

Route를 중첩으로 할 건지 하나의 Route로 할 건지 생각해야합니다.

   - 중첩 URL -

충첩 URL은 Path 밑에 또다른 Path를 주는 겁니다. 예를들어 name/chapchap 이런씩으로 말이죠

 방법은 두가지가 있습니다.

아래 처럼 하나의 URL 처럼 원하는 URL을 적어주고 하위 링크를 두는 겁니다.
<Route path="/about/intro" element={<Content/>}/>

다른 하나는 Route 밑에 다시 Route를 만들어 주는 방법입니다.
<Route path='profile/*' element={<Home name={"Profile"}/>}>
                <Route path='special' element={<Content />} />
</Route>

위의 차이는 컴포넌트를 어떤식으로 사용하냐에 따라 달라 질 것 같습니다.

 

** Router에서 A 태그 만들어 주기 **

import {Link, NavLink} from 'react-router-dom'

<div>
         <nav>
          <ul>
            <li>
              <NavLink to="/">Home</NavLink>
            </li>
            <li>
              <Link to="/about"> About</Link>
            </li>
            <li>
              <Link  to="profile">Error</Link>
            </li>
          </ul>
          </nav>
          {router()}
     </div>

   - Link -

  Link 는 A태그와 같습니다. to는 해당 링크로 이동하라는 의미 입니다. 

"/" -> 메인페이지

"/about" -> about 페이지로 이동

"profile" -> profile 페이지로 이동

   - NavLink -

Link와 NavLink는 css에 class="active"가 표시되나 안하냐의 차이 뿐 입니다.

 

** 중첩 Router 이동하기 **

   - 하나의 URL - 

function Aside(props){
  return (
    <div className="aside">
            <ul>
              <li>
                <NavLink to="intro">intro</NavLink>
              </li>
              <li>
                <NavLink to="intro/1">User ID</NavLink>
                </li>
            </ul>
    </div>
  )
}

function About() {
  return (
    <div  className='Link'>
       <Aside></Aside>
    </div>
  )

위에 처럼 Component 밑에 NavLink to를 하면 현재 URL에 intro를 더 추가하게 된다.

위의 방식 처럼 하면 About 하위로 Component를 생성하는게 아니라 Content로 대체하게 된다.

   - 중첩 Route - 

import  { Outlet} from 'react-router-dom'
function Home(props) {
  return (
    <div className='Link'>
        <p>{props.name}</p>
        <Outlet />
    </div>
  )
}

위와 같은 방식은 Route 하위에 Component를 생성하는 방식이다. 

이때는 <Outlet/> 을 통해 연결을 시켜주면 된다.

즉, profile 밑에 "special" 링크로 들어가게 된다.

 

** Navigate와 Location **

import {useNavigate ,useLocation } from 'react-router-dom'

function Error() {

  let navigate = useNavigate();
  const { pathname } = useLocation();

  return (
    <div  className='Link'>
        <div className='article'>
            <p>This is Error Page - {pathname}</p>
            <button onClick={function(){
              navigate("/about/intro")
            }}> go to About Page</button>
        </div>
    </div>
  )
}

위와 같이 useNavigation을 사용하면 원하는 링크로 이동할 수 있게 해준다.

또한 현재 URL 주소를 알고 싶다면 useLocation을 통해 알수 있다.

** 파라미터값 가져오기 ** 

 <Route path="/about/intro/:userId" element={<Content/>}/>

위 링크를 보면 about/intro/ 에 userId를 주게 되어 있다.

 <NavLink to="intro/1">User ID</NavLink>

그리고 NavLink를 통해서 about/intro/1 을 줘서 이동하고 있다. 

이때 useId에 1이 들어가게 되고 해당 값을 받고 싶다면 

import {useParams } from 'react-router-dom'

function Content() {

    const params = useParams()

    useEffect(() => {
        console.log('컴포넌트가 화면에 나타남');
        return () => {
          console.log('컴포넌트가 화면에서 사라짐');
        };
      }, []);

  return (
    <div className='Link'>
    <p>{!params.hasOwnProperty('userId') ? "없음" : params.userId } : Content</p>
    </div>
  )
}

useParams를 통해서 값을 가져올 수 있게 된다.

 

** 참고 사이트  **

Router :

https://reactrouter.com/docs/en/v6/getting-started/overview

React Router | Quick Start

https://velog.io/@soryeongk/ReactRouterDomV6

[React] react-router-dom v6 업그레이드 되면서 달라진 것들

https://velog.io/@sham/react-router-dom-v6%EB%A1%9C-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%9D%B4%EB%8F%99%ED%95%98%EA%B8%B0

react-router-dom v6로 페이지 이동하기

React :

https://react.vlpt.us/basic/16-useEffect.html

16. useEffect를 사용하여 마운트/언마운트/업데이트시 할 작업 설정하기 · GitBook

https://www.pluralsight.com/guides/how-to-show-and-hide-reactjs-components

How to Show and Hide ReactJS Components | Pluralsight

CSS : 

https://studiomeal.com/archives/197

이번에야말로 CSS Flex를 익혀보자

https://meaningone.tistory.com/318

자바스크립트 style 변경 하기!

 

기타 : 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

삼항 조건 연산자 - JavaScript | MDN

https://stackoverflow.com/questions/20804163/check-if-a-key-exists-inside-a-json-object

Check if a key exists inside a JSON object