React Router

limchard·2023년 12월 15일

BrowserRouter React Route axios browser npm router yarn 라우터 엑시오스

React

목록 보기

6/7

Router 란 브라우저에 기존 Tiles.mapping 처럼 홈페이지에 각각 배치해주는 도구

Router의 개념은 네트워크 상에서 통신 데이터를 보낼 경로를 선택하는 과정을 의미한다. SPA 환경의 웹 애플리케이션 (Vue,React,Angular)에서는 말 그대로 요청(Request)한 URL에 따라 해당 페이지를 보여주는 과정 자체로 이해하면 된다.

A태그와 Router의 차이점:

A 태그

a태그는 화면을 새로고침 한 다음에 페이지를 이동한다는 단점이 있다. (동기방식)

Router

새로운 페이지를 로드하지 않곡 하나의 페이지 않에서 필요한 데이터만 가져오는 형태를 가지기 때문에 불필요한 렌더링을 막을 수 있다. (비동기 방식)

Router 설치하는 법

npm install react-router-dom

yarn

yarn add react-router-dom

엑시오스 설치

npm install axios

yarn

yarn add axios

Root.js

src 폴더에 바로 생성한다.
모든 경록가 오는 RouterMain을 이곳에 해준다.

import React from 'react';
import {BrowserRouter} from "react-router-dom";
import RouteMain from "./RouteMain";

function Root(props) {
    return (
        <BrowserRouter>
            <RouteMain/>
        </BrowserRouter>
    );
}
export default Root;

RootMain.js

mapping 주소를 설정해주는 곳이다.
각 폴더에 index.js 를 만들어주면 import 파일을 보기 편리해진다.
Route path : 매핑주소
element : 이동할 파일

import React from 'react';
import {About, Info, Main, Menu, Title} from "./conponents";
import {Route, Routes} from "react-router-dom";
import Shop from "./shop/Shop";
import Board from "./board/Board";
import Member from "./member/Member";
import Login from "./login/Login";
import {ShopDetail, ShopForm} from "./shop"; // 인덱스를 만들어줘야 이렇게 보기좋게 가독성 좋게 표현된다. 굳이 안써도 되지만 가독성을 위해 index.js를 만들어준다.


function RouteMain(props) {
    return (
        <div>
            {/* 실제 우리의 경로를 지정해주는 곳.
                모든 페이지에서 공통으로 포함되는 컴포넌트나 이미지 */}
            <div className={'title'}><Title/></div>
            <div className={'info'}><Info/></div>
            <div className={'menu'}><Menu/></div>
            <div className={'main'}>
                <Routes>
                    <Route path={'/'} element={<Main/>}/>

                    {/* Shop */}
                    <Route path={'/shop/list'} element={<Shop/>}/>
                    <Route path={'/shop/form'} element={<ShopForm/>}/>
                    <Route path={'/shop/detail/:num'} element={<ShopDetail/>}/>
                    {/* 디테일 페이지로 갈때 num을 파라메터값으로 넘기겠다. */}


                    <Route path={'/board/list'} element={<Board/>}/>
                    <Route path={'/member/form'} element={<Member/>}/>
                    <Route path={'/login'} element={<Login/>}/>
                    <Route path={'/about'} element={<About/>}/>
                      
                    {/* 그 이외 매핑이면... */}
                    <Route path={'*'} element={
                        <div>
                            <h1>잘못된 주소 입니다. </h1>
                        </div>
                        }/>
                </Routes>
            </div>
        </div>
    );
}

export default RouteMain;

components/index.js

예약어처럼 쓰이기 때문에 파일명인 index는 반드시 소문자로 적어야 한다.
export만 해주는 용도로 쓰인다.
굳이 안써도 되지만 추후 import 시에 가독성을 위해 써준다.

export {default as About} from './About';
export {default as Info} from './Info';
export {default as Main} from './Main';
export {default as Menu} from './Menu';
export {default as Title} from './Title';

components/About.js

import React from 'react';

function About(props) {
    return (
        <div>
            <h1>About</h1>
            <iframe
                src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12661.464004775538!2d127.0332008!3d37.499285!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357ca1c32408f9b7%3A0x4e3761a4f356d1eb!2z7IyN7Jqp6rWQ7Jyh7IS87YSw!5e0!3m2!1sko!2skr!4v1702605050651!5m2!1sko!2skr"
                width="600" height="450" style={{border:'0'}} allowFullScreen="" loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"></iframe>
        </div>
    );
}

export default About;

components/Info.js

import React from 'react';
import infoimg from '../image/s1.JPG';

function Info(props) {
    return (
        <div>
            <img src={infoimg} style={{width:'100px'}}/>
            <br/><br/>
            <div>쌍용교육센터</div>
            <div>02-1111-2222</div>
        </div>
    );
}

export default Info;

components/Main.js

import React from 'react';
import mainimg1 from '../image/2.jpg';
import mainimg2 from '../image/3.jpg';
import mainimg3 from '../image/4.jpg';
import mainimg4 from '../image/5.jpg';

function Main(props) {
    return (
        <div>
            <img src={mainimg1} style={{width:'500px'}}/>
            <img src={mainimg2} style={{width:'500px'}}/>
            <img src={mainimg3} style={{width:'500px'}}/>
            <img src={mainimg4} style={{width:'500px'}}/>
        </div>
    );
}

export default Main;

components/Menu.js

NavLink 는 링크를 걸어서 그 링크로 이동 가능하게 해주는 것이다.
여기서 링크 주소는 RootMain.js 에서 적어준 매핑주소(Route path) 와 동일하게 적어줘야 합니다.

import React from 'react';
import {NavLink} from "react-router-dom";

function Menu(props) {
    return (
        <ul className={'menu'}>
            {/*경로는 RouteMain 하고 맞춰줘야 합니다.*/}
            <li><NavLink to={'/'}>Home</NavLink></li>
            <li><NavLink to={'/login'}>Login</NavLink></li>
            <li><NavLink to={'/member/form'}>Member</NavLink></li>
            <li><NavLink to={'/shop/list'}>Shop</NavLink></li>
            <li><NavLink to={'/board/list'}>Board</NavLink></li>
            <li><NavLink to={'/about'}>About</NavLink></li>
        </ul>
    );
}

export default Menu;

components/Title.js

import React from 'react';
import titleimg from '../image/1.jpg';

function Title(props) {
    return (
        <div>
            <img src={titleimg} style={{width:'150px'}}/>
            <b style={{fontSize:'20px',color:'pink'}}>
                React_Springboot Project
            </b>
        </div>
    );
}

export default Title;

App.css

위의 components 폴더에 있던 js 파일들의 위치를 잡아준다.

.App {
  text-align: center;
}

div.title{
  position: absolute;
  top: 50px;

  left: 300px;
  width: 800px;
  height: 100px;
}
div.menu{
  position: absolute;
  top: 250px;
  left: 400px;
  width: 1200px;
  height: 100px;
}

div.info{
  position: absolute;
  top: 350px;
  left: 100px;
  width: 250px;
  height: 300px;
}

div.main{
  position: absolute;
  top: 450px;
  left: 400px;
  width: 1200px;
  margin-bottom: 50px;
}

.menu li{
  font-size: 20px;
  list-style: none;
  float: left;
  width: 120px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  margin-right: 10px;
  background-color: pink;
  border-radius: 20px;
  box-shadow: 3px 3px 3px gray;

}
a{
  color: black;
  text-decoration: none;
}

a:hover{
  color: gray;
}

shop/Shop.js

import React from 'react';
import {useNavigate} from "react-router-dom";

function Shop(props) {

    const navi=useNavigate(); // 이동할 수 있는 메서드

    return (
        <div style={{marginLeft:'100px'}}>
            <button type={"button"} className={'btn btn-info'} style={{width:'120px'}} onClick={()=>{
                navi("/shop/form");
            }}>상품등록</button>
            <h1>Shop 목록 출력..</h1>
        </div>
    );
}

export default Shop;