React Router

라우팅이란?

• 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이다.
• 리액트 라우터는 신규 페이지를 불러오지 않고, 각각의 URL에 따라 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리이다.

리액트 라우터

• <BrowserRouter> 태그로 컴포넌트 최상단에 감싸주자.
• <Routes> 컴포넌트는 여러 Route를 감싸서 그 중 규칙이 일치하는 하나의 Route 만을 렌더링하는 역할을 한다.
• <Route> 에는 path 속성에 경로, element 속성에 컴포넌트를 넣어준다. 
• <Link> 컴포넌트 a 태그 대신 사용하여 브라우저의 주소 경로를 바꿔준다. 

App.js

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

const App = () => {
	return (
    	<BrowserRouter>
        	<Header />
            <Routes>
     			<Route path='/' element={<Main/>}> <Route>   
     			<Route path='/product/*' element={<Product/>}> <Route>
       			<Route path='*' element={<NotFound/>}> </Route>  
            <Routes>
        </BrowserRouter>
    );
};

Main.js

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

const Main = (props) => {
	return (
   		<>
        	<h3> 메인페이지 </h3>
            <ul>
            	<Link to='/product/1'> <li>1번 상품</li> </Link>
                <Link to='/product/2'> <li>2번 상품</li> </Link>
            </ul>
        </>
    );
};

Header.js

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

const Header = (props) => {
	return (
    	<>
        	<Link to='/'>
            	<h1>헤더</h1>
            </Link>
        </>
    );
};

 

URL 파라미터 사용하기

• URL 파라미터는 useParams() 를 사용하여 객체 형태로 조회할 수 있다.
• URL 파라미터의 이름은 라우트 설정 시 Route 컴포넌트의 path props를 통해 설정한다.

App.js

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

const App = () => {
	return (
    	<Routes>
        	<Route path='/' element={<Home/>} />
            <Route path='/about' element={<About/>} />
            <Route path='/profiles/:username' element={<Profile/>} />
        </Routes>
    );
};

pages/Home.js

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

const Home = () => {
	return (
    	<div>
        	<h1>홈</h1>
            <ul>
            	<li>
                	<Link to='/about'> 소개 </Link>
                </li>
                <li>
                	<Link to='/profiles/velopert'> velopert의 프로필 </Link>
                </li>
                <li>
                	<Link to='/profiles/gildong'> gildong의 프로필 </Link>
                </li>
                <li>
                	<Link to='/profiles/void'> 존재하지 않는 프로필 </Link>
                </li>
            <ul>
        </div>
    );
};

pages/Profile.js

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

const data = {
	velopert: {
    	name: '김민준',
        description: '리액트 개발자',
    },
    gildong: {
    	name: '홍길동',
        description: '홍길동전 주인공',
    },
};

const Profile = () => {
	const params = useParams();
    const profile = data[params.username];
    
    return (
    	<div>
        	<h1> 사용자 프로필 </h1>
            {profile ? (
            	<div>
                	<h2> {profile.name} </h2>
                    <p> {profile.description} </p>
                </div>
            ) : (
            	<p> 존재하지 않는 프로필 </p>
            )}
        </div>
    );
};

 

쿼리스트링 사용하기

• 쿼리스트링은 URL 파라미터와 달리 Route 컴포넌트를 사용할 때 별도로 설정해야 되는 것은 없다.
• useLocation() 을 사용해서 location 객체를 반환받고, 이 객체는 현재 사용자가 보고있는 페이지 정보를 지니고 있다. 
  • pathname: 현재 주소 경로 (쿼리스트링 제외)
  • search: 맨 앞의 ?문자 포함한 쿼리스트링 값 (쿼리스트링을 location.serach로 조회)
  • hash: 주소의 #문자열 뒤의 값
  • state: 페이지로 이동할 때 임의로 넣을 수 있는 상태값
  • key: location 객체의 고유값, 초기에는 default이고 페이지가 변경될 때마다 고유의 값이 생

pages/About.js

import {useLocation} from 'react-router-dom';

const About = () => {
	const location = useLocation();
    return (
    	<div>
        	<p> 쿼리스트링: {location.search} </p>
        </div>
    );

}

https://velog.io/@velopert/react-router-v6-tutorial

React Router v6 튜토리얼

 

https://leedr0730.medium.com/react-react-router-dom%EC%9C%BC%EB%A1%9C-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0-a17820895594

[React] React-router-dom으로 로그인 구현하기