[React] Route 사용하기

 

 

React, Route 사용하기

 

 

 

 

  Route 사용하기

 Route는 여럿 React의 js를 관리 및 사용하기 위해 배웠다.

Html의 a링크처럼 클릭해서 서로 다른 React 기능을 관리하기 위해 배웠지만

사용하고 느껴보니 a 링크하고 무언가 다른 기능이었다.

 

 

jsp의 include의 개념과 비슷하며, 페이지 이동한다기보다는 그 화면의 영역을 해당 Component로 바꾸고 있었다.

 

 

https://www.youtube.com/watch?v=WLdbsl9UwDc&t=595s

 

 

Route는 YOUTUBE를 통해서 공부를 했다.

코딩생활, 코딩악마등 다양한 유튜브를 활용했다.

 

 

 

 

 

  사용 결과

같은 html, Home을 클릭했을 때의 모습이다.

 

MollangPiu Blog에서 위의 Link를 통해서 아래 영역이 변경되는 모습을 볼 수 있었다.

먼저 결과를 보여준 이유는, A link를 사용하지만, 일반적인 html과 다르기 때문이다.

 

전체적으로 바뀌지 않고, 해당 예제 소스는 저 빨간색 영역만큼만 변경된다.

위의 사진의 왼쪽과 오른쪽은 a링크를 클릭했을 때 변경되는 모습이다.

 

 

 

  설치하기

 1. npm install react-router-dom

npm install react-router-dom 입력하기

PowerShell, 명령 프롤포트, 인텔리제이 등 어떠한 터미널을 이용해서 npm을 이용해서 react-router-dom을 설치 진행하면 된다.

하지만 필자의 PC의 경우는 한 번에 설치가 되지는 않았다.

 

2022.08.18 - [Web/React] - [React] npm WARN config global '--global', '--local' are deprecated. Use '--location=global' insted.

 

이런 경우에는 위의 문제일 가능성이 높으니, 한 번 해결하는 것도 나쁘지 않다.

 

정상적으로 설치가 되었을 경우, 다음과 같이 import가 활성화된 것을 확인할 수가 있다.

태그를 정상적으로 사용했을 경우에만 활성화가 된다.

 

 

 2. Route 설정하기

Route 사용하는 방법

 Route 설정하는 방법은 위와 같다.

a링크의 href의 경로를 Route에 설정한다.

Route는 화면처럼 해당 Component를 불러오는 역할을 제공한다.

 

사실 크게 어려운 기능은 존재하지 않는다.

단, Version에 따라서 사용하는 방법이 다르므로 해당 방법에 대해서는 열심히 검색하는 수밖에 없다.

필자는 2022년 08월 20일 기준으로 최신 버전 npm으로 설명을 진행하는 중이다.

 

 

 3. BrowserRouter 설정

 해당 화면을 불러오기 위해서는 화면처럼 BrowserRouter설정이 필요하다.

이렇게 태그로 설정을 해둔다면, 해당 Component는 Route를 사용할 수 있는 조건이 충족된다.

 

 

 

4. Routes 설정

React-Route v6에서 Route를 사용하기 위해서는 Route 앞 뒤에 Routes를 붙여줘야 한다.

Route v5와 v6은 사용방법이 다르므로 반드시 확인하고 사용해야 한다.

 

 

 

 

  전체 코드

index.js

import React from 'react';
//import ReactDOM from 'react-dom/client';
import ReactDOM from 'react-dom';
import './index.css';
import reportWebVitals from './reportWebVitals';
import {BrowserRouter, Route, Routes} from "react-router-dom";

import Route01 from './State/Route01.js';


function Home() {
    return (
        <div>
            <h2>Home</h2>
        </div>
    )
}

function Topic() {
    return (
        <div>
            <h2>Concat</h2>
        </div>
    )
}

function App() {
    return (

        <div>
            <h1>Mollang Piu Blog</h1>
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/topic">Topic</a></li>
                <li><a href="/Route01">ABCT</a></li>
            </ul>

            <Home />
            <Topic />

            <Routes>
                <Route exact path="/" element={<Home />} />
                <Route exact path="/topic"  element={<Topic />} />
                <Route path="/Route01"  element={<Route01 />} />
            </Routes>
        </div>
    );
}



ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>, document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

/State/Route01.js

import React, {useState} from 'react'


export default function Route01() {
    return (
        <div style={{backgroundColor: 'yellowgreen', height : '400px'}}>
            <h3>Test 입니다.</h3>
        </div>
    );
}

 해당 예제는 다음과 같이 js 2개만 사용하였다.

좀 만 더 수정하면, 해당 블로그를 위한 React 화면을 꾸밀 수 있을 것 같다.

 

 

 

  마무리

 React를 사용하면서, Version관리의 중요성이 더 필요다고 느껴지는 부분이었다.

Vesrsion이 달라서 책과 youtube의 강의 코드가 실행되지 않았다.

 

 

그렇다고 버전 낮추기도 뭣하고...

어쩌다 보니 시간 소모가 생각보다 더 진행된 부분이므로...이 과정 속에 삽질하는 시간을 줄였으면 하는 마음에 작성하게 되었다.