React Hooks로 데이터를 가져오는 방법

원문 읽기here

이 튜토리얼에서는 "Hooks"라는 새로운 React 기능에 대해 알아볼 것입니다. 글쎄요, 저는 React Hooks 자체에 대한 많은 튜토리얼을 작성했지만 이 실용적인 게시물에서는 이 멋진 React 기능을 사용하여 HTTP 요청을 비동기식으로 보내는 방법을 배울 것입니다.

시작하기

첫째, 분명히 React 애플리케이션이 필요합니다!

아직 없으시다면 아래 명령어를 실행하시면 create-react-app 쉽게 사용하실 수 있습니다.

$ npx create-react-app <YOUR_APP_NAME>

또는 이 전체 프로젝트의 소스 코드를 이미 게시했습니다. 내 GitHub에서 이 리포지토리를 복제하세요.

$ git clone https://github.com/rahmanfadhil/react-hook-fetch

구성 요소가 로드될 때 가져오기

데이터를 가져오려는 구성 요소 내부에 useEffect 후크를 추가해야 합니다.

import React, { useEffect } from "react"

export default function Example() {
  useEffect(() => {
    // Fetch data right here!
  }, [])

  return (
    <div>
      <h1>Cool app</h1>
    </div>
  )
}

두 번째 매개변수에 빈 배열을 넣었습니다. 기본적으로 구성 요소의 상태가 변경될 때마다 useEffect가 호출됩니다. 이 실제 시나리오에서는 이 코드를 한 번 실행하려고 합니다. 따라서 빈 배열은 구성 요소가 화면에 렌더링된 경우에만 이 코드를 실행하도록 useEffect에 지시합니다.

그런 다음 fetch API를 사용하여 데이터를 가져오려고 합니다. 원하는 모든 HTTP 클라이언트를 사용할 수 있지만 여기서는 간단하게 만들고 싶습니다.

이 예에서는 프론트 엔드 애플리케이션을 테스트할 수 있는 가짜 REST API인 JSONPlaceholder을 사용할 것입니다. 오픈 소스이며 사용하기 쉽고 이미 많은 리소스가 제공됩니다.

import React, { useEffect } from "react"

export default function Example() {
  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then(response => response.json())
      .then(data => console.log(data))
  }, [])

  return (
    <div>
      <h1>Cool app</h1>
    </div>
  )
}

이제 가짜 API에서 게시물 데이터를 가져오고 JSON respose를 JavaScript 개체로 변환하려고 합니다. 지금은 최종 결과를 콘솔에 출력합니다.

콘솔 탭을 열면 API에서 방금 가져온 가짜 게시물을 볼 수 있습니다.

좋은 시작이네요!

결과 상태 가져오기

데이터를 성공적으로 가져온 후에는 결과를 화면에 표시할 수 있도록 구성 요소의 어딘가에 저장해야 합니다. 그리고 컴포넌트 상태가 가장 좋은 곳입니다.

Hooks를 사용하여 구성 요소의 상태를 설정하려면 React의 useState 후크를 사용할 수 있습니다. 자세한 내용은 here 읽을 수 있습니다.

import React, { useEffect, setState } from "react"

export default function Example() {
  const [posts, setPosts] = useState([]) // new

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then(response => response.json())
      .then(data => console.log(data))
  }, [])

  return (
    <div>
      <h1>Cool app</h1>
    </div>
  )
}

가져오는 게시물은 배열이기 때문에 상태의 기본값을 빈 배열로 정의할 수 있습니다.

시원한! 이제 setPosts 함수를 사용하여 방금 가져온 게시물을 저장할 수 있습니다.

import React, { useEffect, useState } from "react"

export default function Example() {
  const [posts, setPosts] = useState([])

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then(response => response.json())
      .then(data => {
        setPosts(data) // new
      })
  }, [])

  return (
    <div>
      <h1>Cool app</h1>
    </div>
  )
}

그런 다음 마지막으로 할 일은 데이터를 화면에 표시하는 것입니다. Posts 배열을 반복하고 HTML 목록으로 각 항목을 표시할 수 있습니다.

import React, { useEffect, useState } from "react"

export default function Example() {
  // ...

  return (
    <div>
      <h1>Cool app</h1>
      {posts.map(item => (
        <li>
          <h2>{item.title}</h2>
          <p>{item.description}</p>
        </li>
      ))}
    </div>
  )
}

또한 목록에 자리 표시자를 추가하여 사용자가 빈 화면 대신 로딩 바 등을 볼 수 있도록 할 수도 있습니다.

import React, { useEffect, useState } from "react"

export default function Example() {
  // ...

  return (
    <div>
      <h1>Cool app</h1>
      {posts.length > 0 ? (
        posts.map(item => (
          <li>
            <h2>{item.title}</h2>
            <p>{item.description}</p>
          </li>
        ))
      ) : (
        <h1>Loading posts...</h1>
      )}
    </div>
  )
}

커스텀 후크

데이터를 성공적으로 가져와 브라우저에 표시했습니다.

하지만 여기서는 방금 작성한 코드를 개선할 수 있는 방법을 보여 드리고자 합니다. 지금까지 모든 코드를 단일 구성 요소에 넣었습니다. 이 접근 방식은 재사용할 수 없습니다. 애플리케이션의 다른 구성 요소에서 동일한 작업을 수행하려면 이 코드를 계속해서 다시 작성해야 하기 때문입니다. 아니면 조금 더 나은, 복사-붙여넣기... 🤣

따라서 이를 방지하기 위해 동일한 데이터를 가져오려는 구성 요소에서 사용할 수 있는 사용자 지정 후크를 만들 수 있습니다.

function usePosts() {
  const [posts, setPosts] = useState([])

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then(response => response.json())
      .then(data => {
        setPosts(data)
      })
  }, [])

  return posts
}

사용자 정의 후크는 React에서 제공하는 후크를 포함하는 일반 JavaScript 함수입니다. 따라서 Example 구성 요소 논리를 재사용 가능한 함수로 추출하기만 하면 됩니다.

마지막으로 usePosts 구성 요소 내부에서 이 Example 후크를 사용하여 현재 게시물 데이터를 가져올 수 있습니다.

import React, { useEffect, useState } from "react"

// ...

export default function Example() {
  const posts = usePosts() // new

  return (
    <div>
      <h1>Cool app</h1>
      {posts.length > 0 ? (
        posts.map(item => (
          <li>
            <h2>{item.title}</h2>
            <p>{item.description}</p>
          </li>
        ))
      ) : (
        <h1>Loading posts...</h1>
      )}
    </div>
  )
}

이제 애플리케이션은 이전과 동일하게 작동하지만 코드는 훨씬 더 깔끔하고 읽기 쉽습니다.

빠른 메모

React Hooks로 데이터 가져오기를 위한 고급 기능을 사용하려면 SWR 사용을 고려하십시오. zeit에 의한 데이터 가져오기를 위한 멋진 React Hooks 라이브러리. 로드 상태, 오류 잡기, 사용자 지정 페처, 심지어 React Suspense 정수화와 같은 몇 가지 추가 기능을 제공합니다!