이 튜토리얼에서는 Airtable을 간단한 React 애플리케이션의 데이터 소스로 사용합니다. Airtable에 익숙하지 않다면 그들은 스프레드시트의 친숙함과 함께 데이터베이스의 힘을 가지고 있다고 설명합니다. 스프레드시트에 대한 방법을 알고 있다면 Airtable로 작업하는 데 문제가 없을 것입니다.

완성된 소스 코드는 GitHub에서 찾을 수 있습니다.

w3collective / 반응 방송

Airtable API 및 React를 사용하여 데이터를 가져오고 표시합니다.

Create React App 시작하기

이 프로젝트는 Create React App으로 부트스트랩되었습니다.

사용 가능한 스크립트

프로젝트 디렉토리에서 다음을 실행할 수 있습니다.

원사 시작

개발 모드에서 앱을 실행합니다.
브라우저에서 보려면 http://localhost:3000을 여십시오.
수정하면 페이지가 다시 로드됩니다.
또한 콘솔에 린트 오류가 표시됩니다.

원사 테스트

대화형 감시 모드에서 테스트 러너를 시작합니다.
자세한 내용은 running tests 섹션을 참조하십시오.

원사 빌드

프로덕션용 앱을 build 폴더에 빌드합니다.
프로덕션 모드에서 React를 올바르게 번들로 묶고 최상의 성능을 위해 빌드를 최적화합니다.
빌드가 축소되고 파일 이름에 해시가 포함됩니다.
앱을 배포할 준비가 되었습니다!
자세한 내용은 deployment 섹션을 참조하십시오.

원사 배출

참고: 이것은 단방향 작업입니다. 한 번 eject , 돌아갈 수 없습니다!
만족스럽지 않다면…

View on GitHub

코드로 이동하기 전에 Airtable 설정부터 시작하겠습니다. 아직 가입하지 않았다면 새 Airtable 계정에 가입하세요. 이 제품referral link을 자유롭게 사용하면 Airtable 크레딧으로 10달러를 받게 됩니다.

Airtable은 사용이 매우 간단하므로 here에서 이 튜토리얼을 만들 때 사용한 데이터를 가져오기만 하면 됩니다. 그렇지 않은 경우 데이터 설정과 관련된 단계는 다음과 같습니다.

새 기반을 만듭니다(데이터베이스에 대한 Airtable의 이름).

제목과 테이블 이름을 recipes로 변경합니다.

첫 번째 필드(이름)의 이름을 recipe로 바꿉니다.

메모, 첨부 파일 및 상태 필드를 삭제합니다.

새 URL 및 사진 필드를 추가합니다.

일부 데이터로 채워진 후 내 기지는 다음과 같습니다.



이제 React에서 이 데이터를 표시하는 구성 요소 생성으로 이동할 수 있습니다. Create React App을 사용하여 개발 환경을 설정하지만 이 구성 요소는 기존 애플리케이션에 쉽게 놓을 수 있습니다.

npx create-react-app react-airtable

다음으로 가져오기를 사용하여 Recipes.js 디렉토리에 새 /src 파일을 만듭니다.

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

const Recipes = () => {
  //...
  return (<div/>);
}

export default Recipes;

먼저 Recipes 함수에서 useState 후크에 대한 변수를 정의합니다.

const [recipes, setRecipes] = useState({});

그런 다음 useEffect Hook 내에서 Fetch API를 사용하여 데이터를 검색합니다.

useEffect(() => {
  fetch("https://api.airtable.com/v0/appM9q6JTxRolaNCN/recipes?api_key=YOUR_API_KEY")
    .then((res) => res.json())
    .then((data) => {
      setRecipes(data.records);
      console.log(data);
    })
    .catch((error) => {
      console.log(error);
    });
}, []);

가져오기 요청에 사용된 URL을 가져오려면 먼저 Account page에서 API 키를 생성해야 하며 이를 안전하게 유지해야 합니다. 다음으로 API dashboard을 방문하여 기지를 선택하십시오. "인증"섹션으로 스크롤하고 예제 쿼리 매개변수를 복사합니다.

요청이 성공하면 콘솔에 기록된 데이터를 볼 수 있습니다.



데이터를 가져오고 저장하면 각 레코드를 반복하고 일부 HTML 마크업 내에서 데이터를 래핑할 수 있습니다. 여기에서 "Fetching Data..."텍스트를 애니메이션 프리로더로 대체하여 시각적으로 더 매력적으로 만들 수 있습니다.

return (
  <div>
    {recipes.length > 0 ? (
      recipes.map((record) => (
        <a href={record.fields.url} key={record.id}>
          <img src={record.fields.photo[0].url} alt={record.fields.recipe} />
          <p>{record.fields.recipe}</p>
        </a>
      ))
    ) : (
      <p>Fetching Data...</p>
    )}
  </div>
);

마지막으로 다음과 같이 App.js를 수정하여 구성 요소를 로드합니다.

import "./App.css";
import Recipes from "./Recipes";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Recipes />
      </header>
    </div>
  );
}

export default App;

이것이 이 튜토리얼의 전부입니다. 이 프로젝트는 매우 기본적이지만 React 및 Airtable을 사용하여 더 복잡한 애플리케이션을 구축하기 위한 견고한 기반 역할을 합니다. Airtable의 전체 기능을 보려면 pre-built templates에서 영감을 얻으십시오.