[React] 팀플하면서 배우는 페이지네이션 기능

https://www.youtube.com/watch?v=wAGIOCqS8tk

-전체적인 로직은 이 영상 참고하면서 작성함.

 

Trouble shooting

-원래의 이 코드를, 페이지네이션 기능을 추가하면서

-여기에 +)useState의 setListOfPosts()를 추가해야 하는 상황

useEffect(() => {
     const fetchData = () => {
       dispatch(__getPostsSlice());
     };

     fetchData();
   }, [dispatch]);

⬇︎

-이렇게 useEffect + fetchData 부분에서

-dispatch 반환 결과를 구조분해할당으로 받아온 다음 시도해보려 했으나, 반환결과로 예상했었던 postsData가 아무리 해도 undefined가 나왔음 ...

useEffect(() => {
    const fetchData = () => {
      try {
        // __getPostsSlice 액션 크리에이터를 호출하여 데이터를 가져옴
        const actionResult = dispatch(__getPostsSlice());

        // 액션 크리에이터가 반환한 결과에서, payload를 확인하여 데이터를 가져옴
        if ('fulfilled' in actionResult && actionResult.payload) {
          const { postsData } = actionResult.payload;
          setListOfPosts(postsData); //가져온 데이터를 -> listOfPosts 상태로 설정
        }
      } catch (error) {
        console.error(error);
      }
    };

    fetchData();
  }, []);

⬇︎

-THUNK같은 경우는, dispatch는 단순히 액션을 던져주는 애일 뿐이고, 값을 받아오는건 useSelector로 해야 한다는 조언을 받음

-근데 문제는, useSelector로 값을 받아온 뒤 setListOfPosts()를 해주면, listOfPosts의 값이 바뀔 때마다 랜더링이 계속되면서, too-many-renders 문제가 발생

useEffect(() => {
    const fetchData = () => {
      dispatch(__getPostsSlice());
    };

    fetchData();
  }, [dispatch]);

  const { postsData, isLoading, isError, error } = useSelector((state) => state.postsSlice);
  setListOfPosts(postsData)

⬇︎

💡해결방안

-이미 useSelector로 postsData를 불러왔는데,

-const [listOfPosts, setListOfPosts] = useState([])로 또 설정해주는건 중복로직이라는 아이디어 

- +)버튼이 눌릴때마다, state가 바뀌도록

 

전체 코드

 

'active' 클래스란?