React에서 API에서 데이터를 가져오는 방법

이 블로그는 어떻게 React에서 API로부터 데이터를 얻는지에 관한 것이다.
본문을 읽기 전에 당신은 React 라이브러리와 Application Programming Interface (API)을 잘 알아야 합니다.
React 라이브러리는 풍부하고 확장 가능한 사용자 인터페이스를 구축하는 데 가장 좋은 도구입니다.그것의 강력한 기능은 외부에서 웹 응용 프로그램의 데이터를 가져와 상호작용하는 것이다.

데이터를 가져오는 이유
React를 사용하여 웹 응용 프로그램을 개발하기 시작했을 때, 처음에는 외부 데이터가 필요하지 않을 수도 있습니다.ToDo app 또는 Counter와 같은 간단한 애플리케이션을 구축하고 애플리케이션의 state 객체에 데이터를 추가합니다.이거 좋네.
그러나 일부 상황에서 귀하는 자신의 또는 제3자 API로부터 진실한 세계의 데이터를 요청하기를 원합니다.예를 들어 서점이나 날씨 프로그램을 만들고 싶다면 인터넷의 무료 데이터 원본을 사용하는 것이 더 빠르고 편리할 것이다.

데이터를 어디서 얻습니까?
외부 원본에서 데이터를 얻기로 결정한 이상 문제가 생겼다. 우리 프로그램에서 우리는 도대체 어디에서 이렇게 해야 하는가?
이 문제는 다음 기준에 따라 다릅니다.

데이터 관심 분야

데이터가 보류 중인 경우 로드 표시기는 누가 표시됩니까?

요청이 실패했을 때 선택할 수 있는 오류 메시지는 어디에 있습니까?

일반적으로 이것은 구성 요소 트리에서 이 작업을 수행하는 일반적인 부모 구성 요소입니다.데이터를 가져와 해당 주에 저장하고 아이들에게 배포합니다.
1. 구성 요소를 처음 설치할 때
프로그램을 처음 시작할 때 데이터에 접근하려고 할 때, 우리는 이런 방법을 사용합니다.이것은 부모 구성 요소를 불러올 때 데이터를 가져와야 한다는 것을 의미합니다.
클래스 기반 구성 요소 중 데이터를 얻는 가장 좋은 위치는 componentDidMount()의 생명주기 방법이다.
functional components에서, 이것은 useEffect() 갈고리로, 우리가 데이터를 얻기 위해 빈 의존성 그룹을 가지고 있기 때문이다.
2. 이벤트가 트리거될 때
우리는 이벤트를 촉발할 때의 데이터를 가져올 수 있는 함수를 만들 수 있습니다. 예를 들어 단추를 누르면, 이 함수는 데이터를 얻고, 이 함수를 이벤트에 연결합니다.

데이터 획득 방법
React에서는 API에서 데이터를 추출할 수 있는 여러 가지 방법이 있습니다.

API

가져오기

Axios 라이브러리

사용

비동기 대기 문법 사용

사용자 지정 연결 사용

React 쿼리 라이브러리 사용

GraphQL API

사용
우리는 지금 이 방법들을 상세하게 토론할 것이다.

1. Fetch API를 사용하여 데이터 얻기
Fetch API는 대부분의 현대 브라우저의 윈도우 개체(window.Fetch)에 내장되어 있어 JavaScript를 사용하여 HTTP 요청을 쉽게 보낼 수 있습니다.
CRA에서는 fetch() 방법을 사용하여 데이터를 확인할 수 있습니다.이 메서드는 데이터의 URL만 허용합니다.
이를 위해 fetchData()이라는 방법을 만들 것입니다.제공된 URL을 사용하여 fetch() 메서드를 호출한 다음 결과를 JSON 객체로 변환하여 콘솔에 인쇄합니다.

const fetchData = () => {
return fetch("https://randomuser.me/api/")
      .then((response) => response.json())
      .then((data) => console.log(data));}

우리는 현재 응용 프로그램의 어느 곳에서든 이런 방법을 사용할 수 있다.useEffect() 후크에서 사용하는 예는 다음과 같습니다.

import {useEffect} from "react";

useEffect(() => {
  fetchData();
  }, []);

2. Axios 라이브러리를 사용하여 데이터 얻기
Fetch와 같은 작업을 하지만, 그 결과는 JSON의 대상으로 되돌아왔기 때문에 전환할 필요가 없습니다.
먼저 npm을 사용하여 설치해야 합니다.

npm install axios

그런 다음 프로젝트에 가져와야 합니다. fetchData() 메서드가 아닌 동일한 함수 fetch()에서 사용할 수 있습니다.

import axios from "axios"

const fetchData = () => {
return axios.get("https://randomuser.me/api/")
      .then((response) => console.log(response.data));}

Axios를 사용하는 편리한 점은 문법이 훨씬 짧아서 코드를 줄일 수 있고, 많은 Fetch API에 없는 도구와 기능을 포함한다는 점이다.

3. 비동기 대기 문법으로 데이터 얻기
ES7에서는 async await 구문을 사용하여 약속을 해석할 수 있습니다.이 기능에 익숙하지 않은 경우 here을 참조하십시오.
이렇게 하면 우리가 해소할 수 있다는 장점이 있다.그리고 () 비동기적으로 해석된 데이터를 리셋하고 간단하게 되돌려줍니다.
다음 구문을 사용하여 fetchData() 함수를 다시 작성합니다.

async function fetchData() {
    try {
      const result = await axios.get("https://randomuser.me/api/")
      console.log(result.data));
    } catch (error) {
      console.error(error);
    }
  }

4. 사용자 정의 연결고리로 데이터 얻기
라이브러리 React Fetch 갈고리를 사용하여 API에서 데이터를 추출할 수 있습니다.이것은 이미 우리가 사용할 수 있는 몇 가지 속성을 포함하고 있다. data, error은 오류 처리에 사용되고, isLoading은 문제를 불러오는 데 사용된다.
먼저 설치해야 합니다.

npm install react-fetch-hook

그런 다음 를 가져와 공통 모 어셈블리에서 사용해야 합니다.

import useFetch from "react-fetch-hook"

const {data} = useFetch("https://randomuser.me/api/");
console.log(data);

React Query library와 GraphQL API와 같은 다른 데이터 획득 방법도 있습니다. 그러나 이 블로그는 이들을 깊이 있게 소개하지 않았지만 자유롭게 탐색할 수 있습니다.)
즐겁게 잡아라!!!
제 블로그를 읽어주셔서 감사합니다.원하는 대로 연결하거나:)