vite 및 react를 사용하여 날씨 앱을 빌드해 봅시다 - 2부

맵박스

이제 mapbox API를 호출하여 도시를 검색하는 방법을 살펴보겠습니다.
API를 사용하려면 계정을 만들어야 합니다(신원 확인을 위해 신용 카드를 요구하더라도 무료입니다).

이제 계정이 생성되었으므로 account page에서 기본 공개 토큰을 가져옵니다.

API를 호출하기 위해 axios 을 사용하겠습니다.

npm install --save axios

사용자 입력 저장

이제 필요한 모든 라이브러리가 있으므로 구성 요소 상태에서 사용자가 입력하는 내용을 "저장"할 것입니다.

// src/pages/MainPage.tsx
const MainPage = () => {
  const [searchText, setSearchText] = useState('')
  // ...
  return (
    { /* ...*/ }
    <Form.Control
      placeholder='Search city'
      onChange={(evt) => setSearchText(evt.target.value)}
    />
    { /* ...*/ }
  )
}

API 호출

우리는 callApi라는 함수를 생성할 것입니다. 이 함수는 방금 상태에 저장한 값으로 맵박스 끝점만 호출합니다.

Here's the documentation for the endpoint we are going to use.

GET https://api.mapbox.com/geocoding/v5/{endpoint}/{search_text}.json?access_token={access_token}&types={types} 끝점을 호출하기만 하면 됩니다.

endpoint는 우리의 경우

에서 mapbox.places가 됩니다.

search_text는 로컬 상태

에서 저장한 값입니다.

access_token 계정 페이지에서 받은 토큰

types는 도시를 보고 싶기 때문에 place가 됩니다(자세한 내용은 here 참조).

const callApi = async () => {
  try {
    const access_token = '[your token]'
    const result = await axios.get(`
      https://api.mapbox.com/geocoding/v5/mapbox.places/${searchText}.json?access_token=${access_token}&types=place
    `)
  } catch (error) {
    // if you need to handle any error returned by mapbox
    console.log(error)
  }
}

결과를 얻으면 구성 요소 상태의 새 변수에 도시를 저장하려고 합니다.

또한 모든 것을 저장할 필요는 없으므로 지금은 이름과 GPS 위치를 저장하겠습니다.

const [cities, setCities] = useState([])
// ...
const callApi = async () => {
  // ...
  setCities(
    result.data.features.map((city: any) => ({
      name: city.place_name,
      lat: city.geometry.coordinates[1],
      lng: city.geometry.coordinates[0],
    }))
  )
  // ...
}

그리고 분명히 하드코딩된 목록이 아닌 Mapbox의 값을 표시하려면 파트 1에서 생성한 cities const를 삭제해야 합니다.

지금 우리가 원하는 것은 새로운 키 입력을 받을 때마다 mapbox를 호출하고 도시 목록을 요청하는 것입니다.

이를 위해 useEffect를 사용하고 callApi가 변경될 때마다 searchText 함수를 호출합니다.

useEffect(() => {
  callApi()
},[searchText])

이것은 예상대로 작동하며 문자를 입력할 때마다 mapbox api를 호출하고 도시 목록을 반환합니다.

최적화

이것은 그다지 최적화되지 않았으며 대부분의 호출이 실제로 필요하지 않습니다. 도시 이름을 입력할 때 실제로 검색을 수행하기 전에 x자를 입력할 수 있으며 그렇게 함으로써 요청의 전체 인용문을 사용하지 않을 수 있습니다.

이를 해결하기 위해 x밀리초 후에만 함수를 호출하는 디바운스 후크를 만들 것입니다.

우리는 기본적인 것을 만들 것입니다. 모든 시나리오를 다루고 싶다면 타사 라이브러리의 멋진 것을 사용할 수 있습니다.

// src/hooks/useDebounce.ts
import { useRef } from 'react'
const useDebounce = () => {
  let timer = useRef(0)
  const debounce = (
    callback: () => void, // the method you want to call
    delay: number // the time in ms
  ) => {
    clearTimeout(timer.current)
    timer.current = setTimeout(() => {
      callback()
    }, delay)
  }
  return { debounce }
}
export default useDebounce

useRef 을 사용한 적이 없는 경우:

useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component.

우리의 경우 타이머 var가 다시 렌더링될 때마다 다시 생성되는 것을 원하지 않습니다. 그렇지 않으면 이 타이머의 목적을 무산시킬 것입니다.

따라서 키를 누를 때마다 메서드가 호출되고 타이머가 종료될 때까지 타이머가 재설정됩니다. 지연 시간에 도달하면 콜백이 호출됩니다.

기본 구성 요소에서 어떻게 사용하는지 살펴보겠습니다.

// src/pages/MainPage.tsx
const MainPage = () => {
  // ...
  const { debounce } = useDebounce()

  useEffect(() => {
    debounce(callApi, 500)
  }, [searchText])
}

따라서 이제 입력할 때 500ms 동안 입력을 중지하는 경우에만 엔드포인트가 호출됩니다.