목록처리(2) 부분 페이징 처리 관련 오류발생하여 질문드립니다.

코드로 배우는 React 19 with 스프링부트 API서버

목록처리-동일 페이지 클릭 처리

작성

125

페이지처리하는 부분 오류 발생하여 질문 드립니다.


import React, { useEffect, useState } from "react";
import { getList } from "../../api/todoApi";
import useCustomMove from "../../hooks/useCustomMove";
import PageComponent from "../common/PageComponent";

const initState = {
  dtoList: [],
  pageNumList: [],
  pageRequestDto: null,
  prev: false,
  next: false,
  totalCount: 0,
  prevPage: 0,
  nextPage: 0,
  totalPage: 0,
  current: 0,
};

const ListComponent = () => {
  const { moveToList, page, size } = useCustomMove();

  const [serverData, setServerData] = useState(initState);

  useEffect(() => {
    getList({ page, size }).then((data) => {
      setServerData(data);
    });
  }, [page, size]);

  return (
    <div className="border-2 border-blue-100 mt-10 mr-2 ml-2">
      <div className="flex flex-wrap mx-quto justify-center p-6">
        {serverData.dtoList.map((todo) => (
          <div
            key={todo.tno}
            className="w-full min-w-[400px] p-2 m-2 rounded shadow-md"
          >
            <div className="flex">
              <div className="font-extrabold text-2xl p-2 w-1/12">
                {todo.tno}
              </div>
              <div className="text-1xl m-1 p-2 w-8/12 font-extrabold">
                {todo.title}
              </div>

              <div className="text-1xl m-1 p-2 w-2/10 font-medium">
                {todo.dueDate}
              </div>
            </div>
          </div>
        ))}
      </div>

      <PageComponent
        serverData={serverData}
        movePage={moveToList}
      ></PageComponent>
    </div>
  );
};

export default ListComponent;

listComponent에서 initState 생성하고, setServerData 해서 pageComponent로 전달.

const PageComponent = ({ serverData, movePage }) => {
  console.log("data.prev: " + serverData.prev);

  return (
    <div className="m-6 flex justify-center">
      {serverData.prev ? (
        <div
          className="m-2 p-2 w-16 text-center  font-bold text-blue-400 "
          onClick={() => movePage({ page: serverData.prevPage })}
        >
          Prev{" "}
        </div>
      ) : (
        <></>
      )}

      {serverData.pageNumList.map((pageNum) => (
        <div
          key={pageNum}
          className={`m-2 p-2 w-12  text-center rounded shadow-md text-white ${
            serverData.current === pageNum ? "bg-gray-500" : "bg-blue-400"
          }`}
          onClick={() => movePage({ page: pageNum })}
        >
          {pageNum}
        </div>
      ))}

      {serverData.next ? (
        <div
          className="m-2 p-2 w-16 text-center font-bold text-blue-400"
          onClick={() => movePage({ page: serverData.nextPage })}
        >
          Next
        </div>
      ) : (
        <></>
      )}
    </div>
  );
};

export default PageComponent;

pageComponent에서 serverData받아서 데이터 사용하는 부분.

이러한 오류 발생합니다...

아무리 봐도 어느 부분이 문제 인지 모르겠어요.

serverData.prev 로그 찍어봐도 false라고 남는데.. 그리고 또 렌더링을 해서 undefined상태인건지... 어느 부분이 문제일가요 ㅠㅠ?

prev를 부분을 지우면 pageNumList 에서 문제가 발생하여 prev만의 문제가 아니라 serverData자체를 받아오지 못하는거같습니다..

react spring-boot jpa

답변 2

구멍가게코딩단

지식공유자

PageComponent 자체는 크게 문제가 있어 보이진 않습니다만..

useEffect(() => {

getList({ page, size }).then((data) => {

setServerData(data);

});

}, [page, size]);

우선 useEffect( )를 주석처리하셔서 동작하지 않을때 문제는 발생하지 않아야 합니다(화면에 출력되는 내용은 없지만)

이후 useEffect( )에서 data 변수가 정상적으로 나오는지 console.log()로 확인하셔야 할 듯 합니다.

data가 조금 다르게 구성되지 않았을까 싶네요

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

soomin630님께서 겪고 계신 문제는 주로 serverData의 초기 값이 제대로 설정되지 않거나 데이터가 비동기적으로 가져오기 전까지는 undefined로 처리되어 발생하는 경우가 많습니다. Uncaught TypeError 오류는 undefined 객체에서 map 함수를 호출하려 할 때 주로 발생합니다.

아래는 해당 오류를 해결하기 위한 몇 가지 방법을 설명하겠습니다.

서버 데이터 초기화 및 안전한 사용:
useEffect 호출 이후 serverData가 초기 데이터로 설정될 수 있도록 하고, 데이터가 유효한지 확인하는 조건문을 추가하여 안전하게 접근할 수 있도록 하는 것이 중요합니다.

아래 코드와 같이 pageNumList 및 dtoList를 사용하는 부분에서 조건부 렌더링을 통해 데이터가 존재하는 경우에만 map 함수를 호출하도록 변경할 수 있습니다:

   {serverData.pageNumList && serverData.pageNumList.map((pageNum) => (
     <div
       key={pageNum}
       className={`m-2 p-2 w-12 text-center rounded shadow-md text-white ${
         serverData.current === pageNum ? 'bg-gray-500' : 'bg-blue-400'
       }`}
       onClick={() => movePage({ page: pageNum })}
     >
       {pageNum}
     </div>
   ))}

데이터 Fetch 상태 검사:
비동기적으로 데이터를 가져오므로, useEffect에서 데이터가 비어 있는 상태에서 접근하는 것을 피하기 위해 fetching 상태를 추가적으로 사용하여 데이터가 로딩 중일 때는 적절한 UI (예: 로딩 스피너)를 표시할 수 있습니다.

   const [fetching, setFetching] = useState(false);

   useEffect(() => {
     setFetching(true);
     getList({ page, size }).then((data) => {
       setFetching(false);
       setServerData(data);
     }).catch(() => {
       setFetching(false);
       // 에러 처리 코드
     });
   }, [page, size]);

serverData에서 예상못한 undefined 방지:
데이터 가져오기 전후로 serverData 값이 undefined가 될 수 있음을 항상 고려하여 조건부 랜더링을 추가합니다. 이 방법은 코드가 보다 안정적으로 동작할 수 있게 도와줍니다.

해당 문제점과 관련해서는 비슷한 유형의 오류를 해결한 수강생의 질문과 답변을 참고하시면 도움이 될 것입니다. 이 게시물에서 map 함수를 사용할 때 발생할 수 있는 범용적인 문제와 그에 대한 해결책을 소개하고 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

목록처리(2) 부분 페이징 처리 관련 오류발생하여 질문드립니다.