React 프로젝트 중에 라이브러리 사용에 대해 정리 하는 페이지입니다.

📖 컴포넌트 route 방법

😎 미리보기 영상

📌 화면

📌 url

이처럼 페이지단위가 아닌 컴포넌트 단위로도 route가 가능합니다.
url은 화면에서 보이는 link 클릭에 따른 주소의 변화를 보여줍니다.
주소가 변하는데 어떻게 컴포넌트만 변경이 가능할까요??
아래에서 같이 알아보도록 하겠습니다!

❌ 이전 React 라이브러리(page) 페이지에서 절대경로값이 설정된 상태로 진행이 됩니다. 숙지하고 진행해주세요! <절대경로 값 설정 하기>

📒 폴더 구조

📒 코드 예시

📌 app.js

- App.js

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import loadable from '@loadable/component';


const Main = loadable(() => import('page/Main'), {
	fallback: <div>로딩중</div>,
});
const Hello = loadable(() => import('page/Hello'), {
	fallback: <div>로딩중</div>,
});

function App() {
	return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<Main />} /> 
                <Route path="/hello/*" element={<Hello />} />
            </Routes>
        </BrowserRouter>
	);
}

👉 설명

여기에서 핵심은 <Route path="/hello/*" element={<Hello />} /> 이 부분입니다.
path를 확인해보면 /hello가 아닌 /hello/* 인 것을 확인할 수 있습니다.
그렇다면 뒤에 /*은 무엇인가?? 라는 의문이 드실 텐데
/* 은 이 뒤로 오는 url 주소도 자기 주소에 포함되는 주소라고 생각하시면 됩니다.
간단한 예시로 뒤에 오는 url주소에 hello/123 123부터는 무슨 url주소가 오더라도 앞에 hello만 있으면
저 element를 보여주겠다는 의미입니다.
즉, hello/123이든 hello/dasdnajk 이든 hello/123/12431/12312이든 element를 보여주는것은 같습니다.

📌 home.js

- home.js

import React from 'react';
import { Routes, Route, NavLink } from 'react-router-dom';
import loadable from '@loadable/component';

const Component1 = loadable(() => import('components/Component1'), {
	fallback: <div>로딩중</div>,
});

const Component2 = loadable(() => import('components/Component2'), {
	fallback: <div>로딩중</div>,
});

const Hello = () => {
	return (
		<>
			<div style={{ fontSize: '32px', color: 'red', fontWeight: '700', margin: '30px' }}>
				여기는 안변해요! 아래 Route 컴포넌트 설정 해준 부분만 변합니다!
			</div>
			<ul
				style={{
					display: 'flex',
					gap: '10px',
					marginBottom: '10px',
				}}
			>
				<li>
					<NavLink
						to="/hello/Component1"
						style={({ isActive }) => ({ color: isActive ? 'red' : 'gray' })}
					>
						Component1
					</NavLink>
				</li>
				<li>
					<NavLink
						to="/hello/Component2"
						style={({ isActive }) => ({ color: isActive ? 'red' : 'gray' })}
					>
						Component2
					</NavLink>
				</li>
			</ul>
			<div>
				<Routes>
					<Route path="/Component1" element={<Component1 />} />
					<Route path="/Component2" element={<Component2 />} />
				</Routes>
			</div>
		</>
	);
};

export default Hello;

👉 설명

componenet route에서는 이 component가 핵심이 될 거라 생각합니다.
분명 app.js에서 Route를 썼는데 element 안에서도 또Routes를 사용하고 있습니다.
이 부분이 핵심인데 이게 바로 해당 영역 컴포넌트만 변경을 해주겠다는 의미입니다.
여기서 사용하는 것 중에 다른 하나는 NavLink입니다.
NavLink는 클릭이 되었을 때 active를 줄 수 있습니다.
NavLink 클릭을 통해 to 이벤트가 발생하여 해당 to="/hello/Component1" url로 이동하게 되는데 이때 변하는 부분은

<Routes>
	<Route path="/Component1" element={<Component1 />} />
	<Route path="/Component2" element={<Component2 />} />
</Routes>

이 영역만 변하게 됩니다. 다른 부분은 그대로고 해당 컴포넌트만 변하게 됩니다.
이때 route를 보시면 <Route path="/Component1" element={<Component1 />} /> 이렇게 되어있는데
현재 페이지dml url은 /hello입니다.
이 부분을 유의하시고 진행해 주시면 됩니다.

📌 Component1.js , Component2.js

- Component1.js && Component2.js

import React from 'react';

function Component1() {
	return (
		<>
			<div>component1입니다.</div>
		</>
	);
}

export default Component1;

👉 설명

component는 보여주고싶은 화면을 그려주시면됩니다.

📒 속성 값 정리 표

📌 react-router-dom