8회차 과제 - 김정운

[vni911]

신경써서 구현한 부분

  useEffect(() => {
    const loadMovies = async () => {
      setLoading(true); // 로딩 시작
      const data = await fetchMovies();
      setMovies(data);
      setLoading(false); // 로딩 종료
    };
    loadMovies();
  }, []);

수업에서도 사용한 async를 사용하여 useEffect 내부에서 데이터를 가져옴

• 리스트의 크기가 커서 한 화면에 다 안담기는 현상 발생

 <div className="justify-between flex align-center overflow-hidden text-center mt-3">

overflow-hidden을 통해 넘치는 부분은 스크롤을 통해 볼 수 있도록 해결

  if (loading) {
    return (
        ~~~
    );
  }

로딩 중일 때 화면을 보여줌

함수 소개

  const addWatchedList = (movie) => {
    setWatched((prev) => sortById([...prev, movie]));
    setMovies((prev) => sortById(prev.filter((m) => m.id !== movie.id)));
  };
  
  const addToWatchList = (movie) => {
    setToWatch((prev) => sortById([...prev, movie]));
    setMovies((prev) => sortById(prev.filter((m) => m.id !== movie.id)));
  };

  const removeWatchedList = (movie) => {
    setWatched((prev) => sortById(prev.filter((m) => m.id !== movie.id)));
    setMovies((prev) => sortById([...prev, movie]));
  };

  const removeToWatchList = (movie) => {
    setToWatch((prev) => sortById(prev.filter((m) => m.id !== movie.id)));
    setMovies((prev) => sortById([...prev, movie]));

• addWatchedList : 시청한 영화 목록에 추가
• addToWatchList : 볼 영화 목록에 추가
• removeWatchedList : 시청한 영화 목록에서 제거
• removeToWatchList : 볼 영화 목록에서 제거

  const sortById = (list) => list.sort((a, b) => a.id - b.id);

• sortById : 오름차순 정렬

sortById함수를 볼 영화 목록, 불러온 영화 목록, 시청한 영화 목록에 적용시켰습니다

---

궁금한 점

1. 로그를 보면 2번씩 목록이 호출 되었는데 이유가 궁금합니다!

2. 'npm run dev'를 처음 시행할 때는 로딩창뜨지만 새로고침할 때는 왜 안뜨는지 궁금합니다!

[eveveev]

영화를 오름차순으로 정렬하고, 제거 후 원래 리스트에 추가되도록 코드를 깔끔히 잘 작성하셨네요!

[RSH0770]

코드가 전반적으로 구조화가 잘 되어있어서 금방 이해할 수 있었습니다!

[RSH0770]

sortById라는 함수를 통해 인덱스를 삭제하면 해당 함수 호출을 통한 정렬을 편리하게 구현하셨군요!

[RSH0770]

로딩 중일 때의 화면도 구현하는 것도 좋은 것 같습니다!