[22.05.12] TIL

개발모드면 리액트 자체에서 디버깅을 용이하게 하기 위해서 일부로 리렌더링 합니다! build하고 serve로 봐보세요

infinite scroll

react-intersection-observer, react-use를 이용해 구현하였다.

react-intersection-observer
react-use

const [ref, inView] = useInView();

const getMovieList = useCallback(() => {
  //로딩 및 axios
}, [/*dependencies*/]);

// 마운트 시 get
useMount(() => {
  getMovieList();
});

// inView true인 경우 pageNum + 1
useEffect(() => {
  if (inView) {
    setPageNumber((prev) => prev + 1);
  }
}, [inView, setPageNumber]);

// getMovieList 반복
useUpdateEffect(() => {
  getMovieList();
}, [getMovieList]);

공식 문서를 참고해보세요

isLoading state를 이용해 spinner

{isLoading && <Spinner />}

리스트 마지막에 div로 inView의 값을 설정

<ul>
  //...
</ul>
<div ref={ref} />

즐겨찾기 추가 삭제

favoriteMovieList를 Recoil을 사용해 전역으로 상태 관리

• Modal에서 버튼으로 추가 삭제
• state value에서 movie find -> true면 파비콘 스타일 추가, 추가 버튼 -> 삭제 버튼
• 추가 기능: 같은 id 값 예외처리, [...prev, movie]
• 삭제 기능: prev.filter 아이디 다른 movie

localStorage 해야지...