React Hooks for Data Part 1 - 데이터 가져오기

따라서 React Hooks에 대한 큰 과대 광고는 끝났고 커뮤니티는 더 이상 이에 대해 많이 이야기하지 않습니다. 그러나 진지하게 후크는 짐승입니다. 이 게시물에서는 React Hooks를 사용하여 모든 API에 데이터를 가져오고 제출하는 방법을 설명합니다(이 가이드에서는 REST를 사용하겠습니다).

나만의 후크 작성

API에서 책을 가져오는 첫 번째 후크를 작성하는 것으로 시작하겠습니다. 다음은 예제 코드입니다.

import { useEffect, useState } from 'react'

// The hook is just a simple function which we can export
export const useFetchBooks = () => {

  // First we define the necessary states for our hook
  // this includes book, the loading state and potential errors
  const [books, setBooks] = useState([])
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState(null)

  // useEffect can be compared to componentDidMount,
  // componentDidUpdate and componentDidUnmount
  // read more about useEffect here:
  // https://reactjs.org/docs/hooks-effect.html
  useEffect(() => {

    // First we set the loading and error states
    setLoading(true)
    setError(null)

    fetch('https://library.com/api/books')
      .then(res => res.json())
      .then(json => {
        setLoading(false)
        if (json.books) {
          setBooks(json.books)
        } else {
          setBooks([])
        }
      })
      .catch(err => {
        setError(err)
        setLoading(false)
      })
  }, [])
  return { books, loading, error }
}

이제 이것은 복잡해 보이지만 실제로는 그렇지 않습니다. 주석을 제거하면 데이터를 가져오고 상태를 업데이트하는 매우 짧은 함수가 됩니다.

이제 후크가 있으므로 다음과 같은 구성 요소에서 사용할 수 있습니다.

import React from 'react'
import { useFetchBooks } from './utils/hooks'

const BookList = () => {
  // use your own hook to load the data you need
  const { books, loading, error } = useFetchBooks()

  if (loading) return <div>Loading...</div>
  if (error) return <div>{error}</div>

  return (
    <div>
      { 
        books &&
        books.length > 0 &&
        books.map(book => <div key={book.id}>{book.title}</div>)
      } 
    </div>
  )
}

export default BookList

후크에서 매개변수 사용

이제 우리의 후크는 잘 작동하지만 여전히 약간 멍청합니다. 사용자가 목록에서 책을 검색할 수 있기를 원한다고 가정해 보겠습니다. 다음과 같이 할 수 있습니다.

import { useEffect, useState } from 'react'

// Note here the new parameter we pass into the hook called "search"
// this will be used to search the api for specific books
export const useFetchBooks = (search) => {
  const [books, setBooks] = useState([])
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState(null)

  useEffect(() => {
    setLoading(true)
    setError(null)

    // Change the apiUrl according to the search string
    const apiUrl = search && search.length > 0 ?
      `https://library.com/api/books?search=${search}` :
      'https://library.com/api/books'

    fetch(apiUrl)
      .then(res => res.json())
      .then(json => {
        setLoading(false)
        if (json.books) {
          setBooks(json.books)
        } else {
          setBooks([])
        }
      })
      .catch(err => {
        setError(err)
        setLoading(false)
      })

  // This is important. We pass the new search parameter into
  // the empty array we had before. This means, the effect
  // will run again if this parameter changes
  }, [search])

  return { books, loading, error }
}

이제 구성 요소에서 다음과 같이 후크를 사용할 수 있습니다.

const { books, loading, error } = useFetchBooks(props.search)

이것은 1부에서는 충분해야 하며 후크를 사용하여 모든 API에서 데이터를 가져오는 방법을 명확히 해야 합니다.

완료되는 대로 2부 링크로 이 게시물을 업데이트하겠습니다.

즐거운 시간 보내세요!