본문 바로가기
React/Web

React) React Router V6를 한번 써보기

by 후르륵짭짭 2022. 6. 6.
728x90
반응형

여기가 강남이구나!

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

요즘에 개인적으로 하고 싶은게 있어서 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

Declarative routing for React apps at any scale

reactrouter.com

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

 

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

react-router-dom이 v6으로 업그레이드 되었습니다 :) v5와 다른 점이 몇 가지 있으니 꼭 숙지하시기 바랍니다. 안그럼 아무것도 실행되지 않을지도....

velog.io

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로 페이지 이동하기

개인적으로는 이전 버전이 더 좋다...!

velog.io

React :

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

 

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

16. useEffect를 사용하여 마운트/언마운트/업데이트시 할 작업 설정하기 이번에는 useEffect 라는 Hook 을 사용하여 컴포넌트가 마운트 됐을 때 (처음 나타났을 때), 언마운트 됐을 때 (사라질 때), 그리

react.vlpt.us

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

 

How to Show and Hide ReactJS Components | Pluralsight

This is how, based on the state value and the logical and operator, we can show or hide the components directly. Other ways are also possible. For example, we can make use of logical not, (!), and logical or operator, (||).

www.pluralsight.com

CSS : 

https://studiomeal.com/archives/197

 

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

이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누

studiomeal.com

https://meaningone.tistory.com/318

 

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

 4가지 대표 예제 자바스크립트로 할 수 있는 대표적인 4가지 예제를 기술하고 있다. 오늘은 대표 예제 3번으로 "JavaScript 코딩으로 스타일(CSS) 변경하기"를 연습해 본다. ▶ 대표 예제 1번 ▶ 대

meaningone.tistory.com

 

기타 : 

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

 

삼항 조건 연산자 - JavaScript | MDN

조건부 삼항 연산자는 JavaScript에서 세 개의 피연산자를 취할 수 있는 유일한 연산자입니다. 맨 앞에 조건문 들어가고. 그 뒤로 물음표(?)와 조건이 참truthy이라면 실행할 식이 물음표 뒤로 들어

developer.mozilla.org

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

 

Check if a key exists inside a JSON object

amt: "10.00" email: "sam@gmail.com" merchant_id: "sam" mobileNo: "9874563210" orderID: "123456" passkey: "1234" The above is the JSON ob...

stackoverflow.com

 

728x90
반응형

댓글