Custom Hooks, ์ฝ๋ ๋ถํ ์ ๋ํด ํ์ตํ๋ค.
์ฃผ๋ก ์ฌ๋ฌ url์ fetchํ ๋, ์ฌ๋ฌ input์ ์ํ ์ํ ๋ณ๊ฒฝ ๋ฑ ๋ฐ๋ณต๋๋ ๋ก์ง์ ๋์ผํ ํจ์์์ ์๋ํ๊ฒ ํ๊ณ ์ถ์ ๋ ์ฃผ๋ก ์ฌ์ฉํ๋ค.
use
๋ฅผ ๋ถ์ฌ์ผ ํ๋ค.๊ฐ์ Custom Hook์ ์ฌ์ฉํ๋ค๊ณ ๊ฐ์ ์ํ๋ฅผ ๊ณต์ ํ๋๊ฒ ์๋ ๋ก์ง๋ง ๊ณต์ ํ๋ค. ์ํ๋ ๊ฐ ์ปดํฌ๋ํธ ๋ง๋ค ๋ ์ง์ ์ ์ ์๋๋ค.
//fetch ์ ์ฉ Hook์ ๋ง๋ค์ด url์ ์ธ์๋ก ๋ฐ์ ์ฌ์ฌ์ฉํ ์ ์๋ค.
export default function useFetch(url){
//๋ค๋ฅธ ํจ์์ ๋ค๋ฅด๊ฒ ๋ด๋ถ์ hook์ ์ฌ์ฉํ ์ ์๋ค.
const [data, setData] = useState();
useEffect(() => {
fetch(url)
.then(res => {
return res.json();
})
.then(data => {
setData(data);
});
}, [url]);
//data(ํด๋น ๊ฐ)์ ๋ฐํํด ์ฃผ์ด์ผ ์ฌ์ฉํ ์ ์๋ค.
return data;
}
.
.
.
// API ์ฃผ์๋ง ๋ณ๊ฒฝํด ์ฌ์ฉํ ์ ์๋ค.
import useFetch from "๊ฒฝ๋ก"
const data = useFeuch("API ์ฃผ์")
static import(์ ์ ๋ถ๋ฌ์ค๊ธฐ)?
- ์ฝ๋ ์ต์์์
import
๋ฅผ ์ฌ์ฉํด ์ฌ์ฉํ๊ณ ์ ํ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ/ํ์ผ์ ๋ถ๋ฌ์ค๋ ๋ฐฉ๋ฒ์ด๋ค.
form.addEventListener("submit", e => {
e.preventDefault();
//๋์ ๋ถ๋ฌ์ค๊ธฐ๋ ์ด๋ฐ ์์ผ๋ก ์ฝ๋์ ์ค๊ฐ์ ๋ถ๋ฌ์ฌ ์ ์๋ค.
import('library.moduleA')
.then(module => module.default)
.then(someFunction())
.catch(handleError());
});
const someFunction = () => {
//moduleA๋ฅผ ์ฌ๊ธฐ์ ์ฌ์ฉ
}
dynamic import๋
React.lazy
์ ํจ๊ป ์ฌ์ฉ ํ ์ ์๋ค.
import Component from './Component';
//React.lazy๋ก dynamic import๋ฅผ ๊ฐ์ผ๋ค.
const Component = React.lazy(() => import('./Component'));
React.suspense
์ปดํฌ๋ํธ์ ํ์์์ ๋ ๋๋งํด์ผํ๋ค.fallback
prop์ ์ปดํฌ๋ํธ๊ฐ ๋ก๋๋ ๋๊น์ง ๊ธฐ๋ค๋ฆฌ๋ ๋์ ๋ก๋ฉ ํ๋ฉด์ผ๋ก ๋ณด์ฌ์ค React ์๋ฆฌ๋จผํธ๋ฅผ ๋ฐ์๋ค์ธ๋ค. Suspense ์ปดํฌ๋ํธ ํ๋๋ก ์ฌ๋ฌ ๊ฐ์ lazy ์ปดํฌ๋ํธ๋ฅผ ๋ณด์ฌ์ค ์๋ ์๋ค.// suspense ์ฌ์ฉํ๊ธฐ ์ํด import
import { Suspense } from 'react';
const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));
function MyComponent() {
return (
// React.lazy๋ก ๊ฐ์ผ ์ปดํฌ๋ํธ๋ฅผ Suspense ์ปดํฌ๋ํธ์ ํ์์ ๋ ๋๋ง
// Suspense ์ปดํฌ๋ํธ ํ์์ ์ฌ๋ฌ ๊ฐ์ lazy ์ปดํฌ๋ํธ๋ฅผ ๋ ๋๋ง ์ํฌ ์ ์๋ค.
<div>
<Suspense fallback={<div>Loading...</div>}>
<OtherComponent />
<AnotherComponent />
</Suspense>
</div>
);
}
Route
์ ์ด ๋ ๊ธฐ๋ฅ์ ์ ์ฉ์ํค๋ ๊ฒ์ด ์ข๋ค.import { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
// ๋ผ์ฐํฐ๊ฐ ๋ถ๊ธฐ๋๋ ์ปดํฌ๋ํธ์์ ๊ฐ ์ปดํฌ๋ํธ์ React.lazy๋ฅผ ์ฌ์ฉํด import
const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));
const App = () => (
//Route ์ปดํฌ๋ํธ๋ค์ Suspense๋ก ๊ฐ์ผ ํ ๋ก๋ฉ ํ๋ฉด์ผ๋ก ์ฌ์ฉํ ์ปดํฌ๋ํธ๋ฅผ fallback ์์ฑ์ผ๋ก ์ค์
<Router>
<Suspense fallback={<div>Loading...</div>}>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</Suspense>
</Router>
);
Custom Hook์ ์ด์ฉํด ์์ฃผ ์ฌ์ฉํ๋ ์์ค๋ฅผ ์ ๋ฆฌํ๊ณ ์ฌ์ฌ์ฉ์ฑ์ด ๋์ ์ง ๊ฒ ๊ฐ๋ค.
์๋ก ํ๋ก์ ํธ ํ๋ ์ฝ๋๋ฅผ ๋ฆฌํฉํ ๋ง ํ๊ธฐ ๋ฑ ์ข์ ๋ฏ ์ถ๋ค.
์ฝ๋ ๋ถํ ์ ํตํด ๋ ๋๋ง ์ ๋ถํ์ํ ์ปดํฌ๋ํธ๊น์ง ๋ ๋๋ง ๋๋ ๋ฌธ์ ๋ฅผ ํด๊ฒฐ ํ ์ ์์ ๊ฒ ๊ฐ๋ค.
๋จ ์๊ฐ์ ๋ง์ ์ ๋ณด๋ฅผ ํ์ตํด์ ์ผ๋จ ๊ฐ๋จํ ๊ฐ๋ ์ด๋ผ๋ ํ์ ํด ๋๋ ค๊ณ ํ๋ค.