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

📖 라이브러리

📒 무슨 라이브러리 인가요??

React SPA에서 화면 전환을 위해 사용하는 모듈

📒 폴더 구조

📌 react 프로젝트 JS일때 src로 절대 경로

jsconfig.json

{
	"compilerOptions": {
		"baseUrl": "src"
	},
	"include": ["src"]
}

📒 사용 방법

📌 기본 예시

- App.js

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Main from 'main'
import Hello from 'hello'

function App() {
	return (
        <BrowserRouter>
            <Link to="/">메인</Link><br/>
            <Link to="/hello">홈</Link><br/>
            <Routes>
                <Route path="/" element={<Main />} /> 
                <Route path="/hello" element={<Hello />} />
            </Routes>
        </BrowserRouter>
	);
}

👉 화면

path = '/'

path = '/home'

📒 loadable 적용(코드 분할 route)

loadable이란?
코드 분할을 편하게 하도록 도와주는 라이브러리

📌 loadable 적용

- App.js

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

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

function App() {
	return (
        <BrowserRouter>
            <Link to="/">메인</Link><br/>
            <Link to="/hello">홈</Link><br/>
            <Routes>
                <Route path="/" element={<Main />} /> 
                <Route path="/hello" element={<Hello />} />
            </Routes>
        </BrowserRouter>

	);
}