👨‍💻 사건

End Page 에 도달하였을때를 어떻게 확인하는지, 또한 마지막 페이지에 도달했을때 페이지수가 올라가는것을 어떻게 처리하는지 구현해보기로 했다. 그러고 마지막 페이지에 도달하였을때는 더이상 데이터 패칭을 막도록 하였는데, 그러다보니 마지막 페이지에 도달하면 전 페이지로 넘어가도 데이터 패칭이 일어나지 않았다.

✅ 해결

• End Page 도달을 확인하는 방법 : 데이터패칭을 했을때 아무내용이 없다면, useState 를 통하여 true,false 를 설정해 도달했는지 안했는지를 확인할수있도록 하였다.
• 페이지 올라가는것을 처리하는 방법 : 일단 데이터 패칭을 하려면 다음 페이지의 데이터가 남아있는지를 확인하기위해 페이지를 하나 올리는수밖에 없다. 그래서 만약 마지막페이지에 도달했다면, 페이지의 수를 하나 내리는 방식을 택하였다.
• 데이터 패칭할때 조건추가 : useEffect 를 통해, 의존성 배열의 속성이 변화할경우 데이터 패칭이 일어나도록 기본으로 설정하였고, page가 초기의 페이지(1) 보다 크거나 같고, endPage 가 존재하지 않을때 데이터 패칭이 일어나도록 하였다. (처음에 이렇게 설정하였으나, endPage 에 도달하지 않았을때 다시 상태설정을 돌려놓았어야 했는데 까먹고 하지않아 계속 데이터패칭이 연속적으로 일어났었다.)

해결한 코드는 아래와 같다.

export async function getServerSideProps(context) {
  const page = context.query.page ? context.query.page : 1
  const response = await axios.get(
    `http://localhost:3000/api/data?page=${page}`
  )

  return {
    props: {
      initialData: response.data,
      page,
    },
  }
}

export default function Search({ initialData, page: initialPage }) {
  const [players, setPlayers] = useState(initialData)
  const [page, setPage] = useState(initialPage)
  const [endPage, setEndPage] = useState(false)

  useEffect(() => {
    // 데이터 패칭할때 조건추가
    if (page >= initialPage && !endPage) {
      fetchPage(page)
    } else {
      // End Page 도달을 확인하는 방법
      setEndPage(false)
    }
  }, [page, initialPage, endPage])

  const fetchPage = async (pageNumber) => {
    const response = await axios.get(`/api/data?page=${pageNumber}`)
    const newData = response.data
	// End Page 도달을 확인하는 방법
    if (newData.length === 0) {
      setEndPage(true)
	  // 페이지 올라가는것을 처리하는 방법
      if (page > 1) {
        setPage(page - 1) // 이전 페이지로 돌아감
      }

      alert('더 이상 조건을 만족하는 선수는 없습니다.')
      return
    }

    setPlayers(newData)
  }

  const handlePrevPage = () => {
    const prevPage = page > 1 ? page - 1 : 1
    setPage(prevPage)
  }

  const handleNextPage = () => {
    setPage(page + 1)
  }

  return (
    <div>
      <h1>Search</h1>
      {players.map((player, index) => (
        <div key={index}>
          <h2>{player.Name}</h2>
        </div>
      ))}
      <div>
        {page > 1 && <button onClick={handlePrevPage}>Prev</button>}
        <p>{page}</p>
        <button onClick={handleNextPage}>Next</button>
      </div>
    </div>
  )
}

💭 개선

• 이번에는 MySQL 에서 지나치게 많은 요청으로 서버의 최대 연결 수 제한에 도달했다고 에러 코드가 발생하였다...해결해봐야겠다.