[4주차/치치] 워크북 제출합니다. #46
Conversation
|
썬더 ... 제가 서버 키는 도중에 설치가 안 돼서 2-3번 미션을 아직 덜 했습니당... 내일 스터디 전까지 완성해서 올릴게요 ㅠㅠ ... |
| const useCustomFetch = () => { | ||
| const [movie, setMovie] = useState<MovieInfo[]>([]); | ||
| const [movieDetail, setMovieDetail] = useState<MovieInfo | null>(null); | ||
| const [credits, setCredits] = useState<CastMember[]>([]); | ||
|
|
||
| const [isPending, setIsPending] = useState(false); | ||
| const [isError, setIsError] = useState(false); | ||
| const [page, setPage] = useState(1); | ||
|
|
||
| const { category, movieId } = useParams(); | ||
|
|
||
| const accessToken = import.meta.env.VITE_API_KEY; | ||
| const baseUrl = import.meta.env.VITE_API_BASE_URL; | ||
|
|
There was a problem hiding this comment.
useCustomFetch가 한 번에 목록·상세·출연을 다 묶어 처리해서, 필요 없는 요청까지 함께 돌고 상태도 섞여 보여요. 특정 화면에서 목록만 필요해도 상세/출연 요청의 pending·error가 함께 섞이고, 새로운 리소스가 생길 때마다 훅 내부에 코드를 계속 추가해야 하는 확장성 문제도 발생할 것 같습니다.
요청 URL과 쿼리(params)를 인자로 받는 범용 훅으로 일반화하거나, 리소스별 훅(useMoviesList, useMovieDetail, useMovieCredits)로 분리해 필요한 것만 가져오도록 바꾸면 더 좋을 것 같아요!
| export interface MovieCastDetail { | ||
| id: number; | ||
| cast: CastMember[]; | ||
| } |
There was a problem hiding this comment.
서버 응답 전체에서 타입을 명시하지 않고 원하는 부분만 설정할 수 있었네요 ! 저는 전체를 다 받아서 하나하나 명시하느라 코드가 엄청 길어졌었는데.. 다음부터는 이런 식으로 해야겠군요..
| } | ||
|
|
||
| catch (e) { | ||
| alert('데이터 불러오는 중 오류 발생'); |
There was a problem hiding this comment.
현재 빠른 페이지 전환이 발생할 때, 이전 요청 응답이 늦게 도착해 최신 상태를 덮는 레이스가 생길 수 있습니다.
(ex) page=2가 먼저 도착해 렌더된 뒤, 뒤늦은 page=1 응답이 다시 덮음)
새 요청이 시작되면 AbortController로 이전 요청을 취소하고, 각 요청에 reqId를 부여해 응답 처리 시 if (reqId !== latest) return 가드를 넣어 최신 요청의 응답만 반영되도록 해보는 걸 추천합니다.
유징의 피드백과 함께 이 부분까지 적용하면 React Query의 필요성을 더 선명하게 체감할 수 있을 것 같아요!
|
치치, 4주차도 수고하셨습니다! 머지해주세요~ |
4 participants
✅ 워크북 체크리스트
✅ 컨벤션 체크리스트
📌 주안점