과제 - React Hooks 적용하기
1.Hook의 사용법을 익히며 직접 앱을 최적화하고 명료하게 만들 수 있습니다.
2.React Suspense를 직접 Route에 적용해 볼 수 있습니다.
1.Hook(useState, useEffect, CustomHook, Lazy, Suspense 등)를 사용하여 앱을 최적화하고 잘 작동하게 할 수 있었다.
chrome-extension://nlipoenfbbikpbjkfpfillcgkoblgpmj/video-react.html?id=1659091568346
2.React Suspense는 딱히 어려울게 없다. 그냥 import로 lazy, Suspense를 받아온 후 루트 분기점들을 Suspense로 감싸주고 루트로 받아올 컴포넌트들에 lazy를 넣어주면 된다.
import {Suspense, lazy } from 'react';
const Home = lazy(() => import('./Home')); //lazy로 컴포넌트들 감싸주기
const CreateBlog = lazy(() => import('./blogComponent/CreateBlog'));
const BlogDetails = lazy(() => import('./blogComponent/BlogDetail'));
const NotFound = lazy(() => import('./component/NotFound'));
<Suspense> //루트 시작부분부터
<Routes>
<Route exact path="/" element={<Home blogs={blogs} isPending={isPending} />} />
<Route path="/create" element={<CreateBlog isChanged={isChanged} setIsChanged={setIsChanged}/>} />
<Route path="/blogs/:id" element={<BlogDetails isChanged={isChanged} setIsChanged={setIsChanged} />} />
<Route path="/blogs/:id" element={<NotFound />} />
</Routes>
</Suspense> //루트 끝부분까지 Suspense로 감싸기
오늘 과제는 페어분과 재미있게 잘 진행할 수 있었다.
이제 fetch부분도 여유있게 사용할 수 있게 됐고 리액트의 동작에 대해서도 좀 더 알아가는 것 같다.