분류 Reactjs

React Hooks로 데이터를 가져 오는 방법은 무엇입니까?(1)

컨텐츠 정보

  • 조회 396 (작성일 )

본문

이 튜토리얼에서는 stateeffect 후크를 사용하여 React with Hooks에서 데이터를 가져 오는 방법을 보여 드리고자 합니다. 

널리 알려진 Hacker News API를 사용하여 기술 분야의 인기 기사를 가져올 것입니다. 

또한 애플리케이션의 어느 곳에서나 재사용하거나 독립형 노드 패키지로 npm에 게시 할 수 있는 데이터 가져 오기에 대한 사용자 정의 후크를 구현합니다.


이 새로운 React 기능에 대해 모르는 경우 React Hooks 소개를 확인하십시오. 후크로 리액트에서 데이터를 가져 오는 방법을 보여주는 예제에서 완성 된 프로젝트를 체크 아웃하려면 이 GitHub 저장소를 체크 아웃하십시오.


https://www.robinwieruch.de/react-hooks-fetch-data/ 


데이터 가져 오기를 위해 React Hook를 사용할 준비가 되었으면 npm install use-data-api를 설치하고 설명서를 따르십시오. 사용하는 경우 별표 표시를 잊지 마십시오 :-)


참고 : 나중에 React Hooks는 React에서 데이터를 가져 오기 위한 것이 아닙니다. 대신 Suspense라는 기능이 담당합니다. 그럼에도 불구하고 다음 연습은 React의 상태 및 효과 후크에 대해 자세히 배울 수 있는 좋은 방법입니다.


React 후크를 사용한 데이터 페치 


React의 데이터 가져 오기에 익숙하지 않은 경우 React 기사에서 광범위한 데이터 가져 오기를 확인하십시오. React 클래스 컴포넌트를 사용한 데이터 페칭, Render Prop 컴포넌트상위 순서 컴포넌트로 재사용 할 수 있는 방법, 오류 처리 및 스피너로드를 처리하는 방법을 안내합니다. 이 기사에서는 함수 컴포넌트의 React Hooks를 사용하여 모든 것을 보여 드리고자 합니다.


import React, { useState } from 'react';

function App() {
  const [data, setData] = useState({ hits: [] });

  return (
    <ul>
      {data.hits.map(item => (
        <li key={item.objectID}>
          <a href={item.url}>{item.title}</a>
        </li>
      ))}
    </ul>
  );
}

export default App;


앱 구성 요소에는 항목 목록이 표시됩니다 (적중 = 해커 뉴스 기사). 상태 및 상태 업데이트 기능은 앱 구성 요소에 대해 가져올 데이터의 로컬 상태를 관리하는 useState라는 상태 후크에서 제공됩니다. 초기 상태는 데이터를 나타내는 개체의 빈 적중 목록입니다. 아직 이 데이터의 상태를 설정하는 사람이 없습니다.


Axios를 사용하여 데이터를 가져 오지만 다른 데이터 페치 라이브러리 또는 브라우저의 기본 페치 API를 사용하는 것은 사용자의 책임입니다. 아직 axios를 설치하지 않은 경우 명령 행에서 npm install axios를 사용하여 설치할 수 있습니다. 그런 다음 데이터 페치에 대한 효과 후크를 구현하십시오.