Published on

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

Authors
  • avatar
    Name
    Hyo814
    Twitter

1. useSWR 사용 이유

useSWR은 데이터 캐싱과 패칭을 효율적으로 처리하기 위해 사용됩니다. 무한 스크롤에서 데이터를 페이지 단위로 불러오면서 캐싱을 통해 불필요한 네트워크 요청을 줄이는 데 효과적입니다.

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

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

3. 무한 스크롤 이슈

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

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

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

프론트엔드에서의 데이터 정제는 백엔드에서 데이터가 제대로 제공되지 않을 때 필요한 임시 방편입니다. 최종적으로는 백엔드 문제를 해결하는 것이 장기적으로 옳은 접근입니다.

결론

  1. useSWR 사용: 캐싱과 데이터 패칭 최적화를 위해 적합한 선택입니다. 불필요한 요청을 줄이고, 데이터 페칭을 효율적으로 관리합니다.
  2. 프론트엔드의 역할: 무한 스크롤에서 스크롤 이벤트 처리와 페칭 조건을 적절히 제어하는 것이 중요합니다.
  3. 백엔드와 협업: 데이터를 페이지 단위로 적절히 제공하도록 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

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

무한 스크롤 구현에서 발생하는 이슈는 적절한 기술 선택과 프론트엔드 및 백엔드의 협업을 통해 해결할 수 있습니다. 상황에 맞는 데이터 패칭 및 캐싱 전략을 선택하세요.