Live React 앱을 위한 데이터 가져오기

웹 개발 및 프로그래밍 모험을 시작할 때 대부분의 시작 앱과 개념은 단일 페이지의 정적 애플리케이션을 통해 이해됩니다. 즉, 이러한 앱은 호스팅되는 시스템에 관계없이 동일하며 일반적으로 인터넷 연결이 필요하지 않습니다.

그러나 대부분의 일상적인 응용 프로그램에서 볼 수 있듯이 이러한 응용 프로그램을 사용할 때 사용자에게 고유한 경험을 제공하기 위해 항상 라이브 업데이트 및 클라이언트-서버 상호 작용이 있습니다. 이는 React에서 Data Fetching으로 도입되었습니다.

웹 페이지에서 데이터를 업데이트하고 채우는 방법은 AJAX 호출로 정의됩니다. React 애플리케이션에는 window.fetch라는 이러한 호출을 위한 내장 라이브러리가 있습니다. 이 가져오기 명령을 사용하여 추가 데이터를 수집하기 위해 호출할 수 있습니다.

fetch('http://example.com/ingredients.json')
  .then((res) => res.json())
  .then((data) => console.log(data));

가져오기 호출과 관련된 첫 번째 매개변수는 정보를 수집할 위치를 React에 알려줍니다. 대상을 json 파일로 우선 순위 지정하면 수신된 데이터를 변환하는 단계가 줄어듭니다. 결과는 기술적으로 json 본문이 아니라 결국 json 형식으로 변환되는 응답res 요소로 바뀔 약속입니다. 그런 다음 마지막.then 문으로 수집된 데이터로 수행할 작업을 최종적으로 지시할 수 있습니다.

가져오기 명령을 적절하게 프로그래밍할 수 있는 첫 번째 시간은 useEffect() 후크와 함께 사용하는 것입니다. 단순히 DOM 요소와 기본 HTML을 로드하는 페이지 렌더링의 첫 번째 단계 후에 텍스트 콘텐츠 및 이미지 소스뿐만 아니라 대부분의 구성 요소가 렌더링되는 또 다른 '다시 로드'가 실행됩니다. 여기에서 useEffect 후크를 호출하여 사용해야 하는 외부 데이터를 수집할 수 있습니다.

import React, { useState, useEffect } from "react";
function App() {
  const [recipesList, setRecipesList] = useState([]);

  useEffect(() => {
    fetch("http://api.open-cooking.org/recipes.json")
      .then((res) => res.json())
      .then((data) => {
        setRecipesList(data.recipes);
      });
  }, []);

  return <div>{peopleInSpace.recipes((recipe) => recipe.ingredients)}</div>;
}

export default App;

여기의 예제 코드는 React 애플리케이션의 초기 '두 번째' 로드 중에 가져오기를 호출하고, 데이터를 읽을 수 있는 json 형식으로 설정하고, 데이터를 recipesList의 상태 변수에 추가합니다.

가져오기 인수를 호출하는 또 다른 시간은 모든 DOM 요소에 대한 이벤트 신호 동안입니다. 버튼이나 이벤트를 클릭한 후 데이터를 검색하고 로드해야 한다고 가정해 보겠습니다.

function handleClick() {
  fetch("http://api.open-notify.org/recipes.json")
    .then((res) => res.json())
    .then((json) => setData(json));
}

return <button onClick={handleClick}>Click to Fetch!</button>;

버튼을 클릭하면 URL에서 데이터에 액세스하고 이를 상태 변수에 할당하는 함수를 호출합니다.

다음은 외부 소스에서 데이터를 호출하고 가져오는 두 가지 기본 시나리오입니다. 이러한 반응 구축의 확장된 관점을 통해 데이터를 변경하고 검색하기 위해 사용자와 상호 작용하는 약간 더 고급 애플리케이션을 구축할 수 있습니다.

자원
AJAX 및 API - React( https://reactjs.org/docs/faq-ajax.html#example-using-ajax-results-to-set-local-state )

Fetch API 사용 - mdn 웹 문서( https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch )

효과 후크 사용 - 반응
( https://reactjs.org/docs/hooks-effect.html )