react에 구글 스프레드 시트 연동하기

https://handsondataviz.org/google-sheets-api-key.html

Get Your Google Sheets API Key | Hands-On Data Visualization

 

apiKey는 위 방법으로 얻고

 

라이브러리는 아래꺼 사용하기

 

import { GoogleSpreadsheet, GoogleSpreadsheetRow } from "google-spreadsheet";
import { useEffect, useState } from "react";

export const getGoogleSheet: () => Promise<GoogleSpreadsheet> = async () => {
  const doc = new GoogleSpreadsheet(
    "시트아이디",
    {
      apiKey: 키,
    }
  );

  await doc.loadInfo();
  return doc;
};

// 구글 시트 조회하는 custom useHook
const useGoogleSheet = (sheetId: string) => {
  const [googleSheetRows, setGoogleSheetRows] = useState<
    GoogleSpreadsheetRow[]
  >([]);

  const fetchGoogleSheetRows = async () => {
    const googleSheet = await getGoogleSheet();
    const sheetsByIdElement = googleSheet.sheetsByTitle[sheetId];
    const rows = await sheetsByIdElement.getRows();
    setGoogleSheetRows(rows);
  };

  console.log("rows", googleSheetRows);

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

  return [googleSheetRows];
};

export default useGoogleSheet;