무한 스크롤에서는 왜 이슈가 생긴 걸까

1. useSWR 사용 이유

useSWR은 데이터 캐싱과 패칭을 효율적으로 처리할 때 씁니다. 무한 스크롤에서 데이터를 페이지 단위로 불러올 때 캐싱이 있으면 불필요한 네트워크 요청을 줄일 수 있습니다.

2. 데이터 정제와 누락된 API 문제

백엔드 API가 누락되었거나 필요한 데이터를 제대로 보내지 않으면, 백엔드 팀과 협의해 API를 수정하는 쪽이 우선입니다.
불가피하게 프론트엔드에서 데이터를 처리해야 한다면, 데이터를 정제하거나 보완하는 작업이 필요합니다.

3. 무한 스크롤 이슈

무한 스크롤에서 데이터 패칭 이슈는 여러 원인으로 발생합니다. 주요 해결책은 다음과 같습니다:

Intersection Observer API 활용: 사용자가 화면에서 마지막 요소에 가까워질 때만 새로운 데이터를 요청하도록 개선합니다.
Throttle/Debounce 적용: 스크롤 이벤트 발생 빈도를 줄여 과도한 데이터 요청을 방지합니다.
중복 요청 방지: 이미 요청된 데이터 범위를 추적하여 동일한 데이터를 다시 요청하지 않도록 처리합니다.

4. 프론트엔드에서의 데이터 정제 필요성

프론트엔드 데이터 정제는 백엔드에서 데이터가 제대로 제공되지 않을 때 쓰는 임시 방편입니다. 결국 장기적으로는 백엔드 문제를 해결하는 쪽이 옳습니다.

결론

useSWR 사용: 캐싱과 데이터 패칭 최적화에 알맞은 선택입니다. 불필요한 요청을 줄이고 데이터 패칭을 효율적으로 관리합니다.
프론트엔드의 역할: 무한 스크롤에서는 스크롤 이벤트 처리와 패칭 조건을 적절히 제어하는 일이 중요합니다.
백엔드와 협업: 데이터를 페이지 단위로 제공하도록 API를 개선하고 응답 시간을 최적화해야 합니다.

React에서 데이터 패칭 및 캐싱 방법

1. SWR (Stale-While-Revalidate)

React Query와 유사하며 가볍고 간단한 사용법이 특징입니다. 캐싱과 자동 데이터 갱신(revalidate) 기능이 강점입니다.

import useSWR from 'swr'

const fetcher = (url) => fetch(url).then((res) => res.json())

function MyComponent() {
  const { data, error } = useSWR('/api/data', fetcher)

  if (error) return <div>Error</div>
  if (!data) return <div>Loading...</div>

  return <div>{JSON.stringify(data)}</div>
}

2. Axios or Fetch with Custom Hooks

import { useState, useEffect } from 'react'
import axios from 'axios'

function useFetchData(url) {
  const [data, setData] = useState(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get(url)
        setData(response.data)
      } catch (error) {
        setError(error)
      } finally {
        setLoading(false)
      }
    }

    fetchData()
  }, [url])

  return { data, loading, error }
}

export default useFetchData

3. Apollo Client (GraphQL)

GraphQL과 자연스럽게 연동되며, 강력한 캐싱과 데이터 관리 기능을 제공합니다.

import { useQuery, gql } from '@apollo/client'

const GET_ITEMS = gql`
  query GetItems($limit: Int!, $offset: Int!) {
    items(limit: $limit, offset: $offset) {
      id
      name
    }
  }
`

function MyComponent() {
  const { loading, error, data } = useQuery(GET_ITEMS, {
    variables: { limit: 10, offset: 0 },
  })

  if (loading) return <p>Loading...</p>
  if (error) return <p>Error :(</p>

  return data.items.map(({ id, name }) => (
    <div key={id}>
      <p>{name}</p>
    </div>
  ))
}

4. Redux Toolkit (RTK Query)

Redux 상태 관리와 통합된 데이터 패칭 솔루션으로, 서버 상태와 클라이언트 상태를 일관되게 관리합니다.

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

const apiSlice = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    getItems: builder.query({
      query: (page) => `items?page=${page}`,
    }),
  }),
})

export const { useGetItemsQuery } = apiSlice

5. Firebase with Firestore

실시간 데이터와 연동되는 서비스에 유용합니다.

무한 스크롤 구현에서 마주치는 이슈는 적절한 기술 선택과 프론트엔드·백엔드 협업으로 해결됩니다. 상황에 맞는 데이터 패칭·캐싱 전략을 선택하세요.