🍌 캐시 = 책상 위의 바나나. 반응 쿼리를 사용한 반응 성능

🤔 리액트 쿼리란?

리액트 캐시 라이브러리
Official site

🤔 캐시란?

지금 집에서 일하고 부엌에 가서 바나나를 먹는다고 상상해 보십시오. 1시간이 지나면 배가 고파지고 또 부엌에 가고...

책상 위에 바나나 올려놓고 가져가세요! 부엌에 몇 번이고 갈 필요가 없습니다.

Bananas = data
kitchen = server
your desk = cache

(1000개처럼 책상에 바나나를 너무 많이 올려놓으면 일이 너무 힘들어집니다. 조심하세요)

⏬ 네, 자세히 알려드릴게요 ⏬

😢 고전적인 방식의 약점 상태 관리

서버 및 React 앱 상태의 데이터 통합
(예: Redux "스토어")

바나나와 노트와 펜과 다른 모든 것들이 책상 위에있는 것처럼 혼란 스럽습니다.

😇 이 문제를 해결하는 방법은 무엇입니까?

별도의 상태 관리 후 "react-query"는 캐시로 서버 데이터를 관리합니다.

바나나를 위해 책상 위에 작은 상자를 만드는 것과 같습니다.

👍 반응 쿼리 사용의 이점

1.가져오기 횟수 최적화

책상 위의 바나나만 상하면 부엌으로 가야 한다

2.더 나은 UX(로드 시간 단축)

부엌에 가면 일을 할 수 없습니다. 시간 낭비

3. 적은 코드

⇩클래식 코드

export const useClassicalFetch = () => {
  const { tasks, setTasks } = useStateContext()
  const [isLoading, setLoading] = useState(false)
  const [isError, setError] = useState(false)

  useEffect(() => {
    const fetchData = async () => {
      setError(false)
      setLoading(true)
      try {
        const res = await axios('http://hoge.com/api/tasks/')
        setTasks(res.data)
      } catch (error) {
        setError(true)
      }
      setLoading(false)
    }
    fetchData()
  }, [setTasks])

  return { tasks, isLoading, isError }
}

⇩반응 쿼리

const getTasks = async () => {
  const { data } = await axios.get<Task[]>('http://hoge.com/api/tasks/')
  return data
}

// *** Here definition of react-query ***
export const useQueryTasks = () => {
  return useQuery<Task[], Error>({
    queryKey: 'tasks',
    queryFn: getTasks,
    cacheTime: 10000,//10sec
    staleTime: 10000,
  })
}

컴포넌트에서 사용하는 방법

const TaskList: VFC = () => {
  const { status, data } = useQueryTasks()
  if (status === 'loading') return <div>{'Loading...'}</div>
  if (status === 'error') return <div>{'Error'}</div>
  return (
    <div>
      {data?.map((task) => (
        // omit here
      ))}
    </div>
  )
}

🌟 반응 쿼리 구성 값 설명

staleTime

예를 들어 10000ms(10초)를 설정합니다.
구성 요소를 탑재한 후 처음 10초 동안 캐시 데이터는 "신선한"상태가 되고 그 후에는 "부실(이전)"로 변경됩니다.

fresh -> using cache
stale -> fetch data from server

cacheTime

예를 들어 10000ms(10초)를 설정합니다.
구성요소 마운트 해제 10초 후 캐시 데이터 삭제

refetchOnWindowFocus

커서가 창에 초점이 맞춰지면 자동으로 데이터를 가져옵니다.

// ex. When you use chrome and firefox. 
use chrome
↓
use firefox
↓
use chrome, then fetch data automatically !

참조

this page , 일본어로 되어 있지만