React-query?

데이터 가져오기 라이브러리

기술적인 용어로 말하면 React 애플리케이션에서 서버 상태 가져오기, 캐싱, 동기화 및 업데이트 를 쉽게 만듭니다.

참조
React-Query Docs

how to use

사용할 컴포넌트 상위에서 준비

import { QueryClient, QueryClientProvider } from 'react-query'
 
 const queryClient = new QueryClient()
 
 export default function App() {
   return (
     <QueryClientProvider client={queryClient}>
       <Example />
     </QueryClientProvider>
   )
 }

사용할 컴포넌트 셋팅

import React, { useState } from 'react'
import { useQuery } from 'react-query'
import { getDissName } from 'services/dataList'
import styles from './main.module.scss'

const Main = () => {
  const [list, setList] = useState([{ sickNm: '' }])
  const [search, setSearch] = useState<string>('')
  const [input, setInput] = useState<string>('')
  const { isLoading } = useQuery([`searchData${search}`, search], () =>
    getDissName({ searchText: search }).then((res) => setList(res.data.response.body.items.item))
  )
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    setSearch(input)
  }
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { value } = e.currentTarget
    setInput(value)
  }
  return (
    <div className={styles.main}>
      <form action='submit' onSubmit={handleSubmit}>
        <input type='text' value={input} onChange={handleChange} />
      </form>
      <ul>
        {search !== '' && isLoading
          ? 'loading'
          : list.map((item, index) => {
              const key = `sickNm${index}`
              return <li key={key}>{item.sickNm}</li>
            })}
      </ul>
    </div>
  )
}

export default Main