5차 과제 re-try
지난번에 작업하던 파일은 기능 구현만 하고 멈췄다.
처음엔 로그인만 생각했기에 미리 페이지 구상을 안 해서 페이지가 배배 꼬였다.
그래서 저번엔 리액트 쿼리로 작업했으니 이번엔 리덕스 청크로 작업해기로 하며 새로 시작했다.
디자인 생각하고 싶지 않은데 페이지가 많으니 골치 아프다.
그래서 모바일 사이즈로 작업했다.
리덕스 청크는 코드가 길긴 하지만 지금까지 리덕스를 연습해서 그런지 생각보다 리액트 쿼리보다 편했다 ㅋㅋㅋㅋㅋㅋ
리액트 쿼리가 캐싱 관리가 된다고하는데 아직 잘 못 다루겠다.
리액트 라우터로 화면전환을 할 때 플링커 현상 같은 게 있는 것 같다. 그래서 0.8초 유지되는 로딩 페이지를 넣어줬다.
const [showLoading, setShowLoading] = useState(true);
const { isLoading, error, cards } = useSelector((state) => {
return state.cards;
});
useEffect(() => {
const timer = setTimeout(() => {
setShowLoading(false);
}, 800);
dispatch(__getCards());
return () => {
clearTimeout(timer);
};
}, []);
if (isLoading || showLoading) {
return <Loading />;
}
if (error) {
return <div>{error.message}</div>;
}next
- 로그인, 회원가입 구현
- 댓글 수정/삭제 넣을 것인가
- 헤더에 뒤로가기 넣기
- 리액트 쿼리로 수정해보기
