[React] 구글 스프레드 시트 API 이용하기(with google-spreadsheet)

버전 정보

• react: ^18.2.0
• react-scripts: ^4.0.2 (5버전은 에러가 너무 많이 나서 다운그레이드)
• google-spreadsheet: ^3.3.0

 

구글 스프레드 시트 API

구글 스프레드 시트 API를 이용하여 받아온 데이터를 React에서 처리하려고 한다.

API를 이용하면 자바스크립트나 파이썬등에서 코드를 통해 시트 내용을 조회, 생성, 수정, 삭제를 할 수 있다.

 

이 작업은 주로 정적인 사이트에 사용하면 좋을 것 같다. 

그리고 개발 코드를 직접 다룰 수는 없고, 구글 스프레드 시트에 익숙한 사람들. 즉 기획자분들과의 협업에도 도움이 될 것 같다.

예를 들어, 기획자 분들이 스프레드 시트에 작업을 하면 그 작업 내용을 DB에 넣는 경우가 있는데, 스프레드 시트 값이 자주 업데이트 되면 꽤 수고스러운 작업이 된다. 또 반대로 개발 쪽에서 수정하면, 스프레드 시트에서도 수정을 해야 한다.

이러다 보니 한쪽에서는 바꿨는데 실수로 전달을 못 했을 경우에는 스프레드의 내용과 개발 쪽의 내용이 달라진다.

이럴 경우 구글 스프레드 시트 API를 사용하면 두 매체가 동기화 될 것이다.

 

구글 스프레드 시트 API 등록 과정

우선 https://console.cloud.google.com/apis/credentials로 이동하여 프로젝트를 생성한다.

 

프로젝트를 생성 후에 서비스 계정을 생성한다.

 

사용자 인증 정보 화면의 서비스 계정 부분에 생성된 계정을 클릭하여 키를 추가한다.

 

키 추가가 완료되면, 해당 키값이 들어있는 json파일이 다운로드된다.

 

구글 스프레드 시트 API 활성화

처음 구글 스프레드 시트를 만들고, 위의 파일을 적용하면 API가 닫혀있어서 403 에러가 발생한다.

다음과 같이 API를 사용 상태로 수정하자.

 

권한 부여

위와 같이 작업 했더라도, 공유가 안되어 있어서 메시지만 다른 403 에러가 발생한다.

서비스 계정 목록에 있는 계정을 추가하자. 키 생성시 다운로드 받은 json파일에도 client_email이 존재한다. 

 

스프레드 시트를 입맛에 맞게 만든다. 이때 Document ID와 worksheet ID값을 복사한다.

 

React 작업

$yarn add google-spreadsheet --dev

# 타입 스크립트를 사용할 경우
$yarn add @types/google-spreadsheet --dev

 

정상적으로 동작하는지만 확인하면 되기에 간단하게 작성했다.

위에서 다운로드 받은 파일을 적절한 위치에 넣은 후 require하고, 바로 위에서 복사한 Document ID 값을 넣어준다.

// src/libs/googlesheet.ts

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

const credential = require(키 추가한 후 다운로드된 json파일 위치);

// 구글 시트 조회하는 로직
export const getGoogleSheet: () => Promise<GoogleSpreadsheet> = async () => {
    const doc = new GoogleSpreadsheet(Document ID 값 넣는 곳);
    // 구글 인증이 필요하다.
    await doc.useServiceAccountAuth(credential);
    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.sheetsById[sheetId];
        const rows = await sheetsByIdElement.getRows();
        setGoogleSheetRows(rows)
    }

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

    return [googleSheetRows];
}

export default useGoogleSheet;

 

worksheet ID값도 넣어준다.

// src/App.tsx

const App = () => {

    const [data] = useGoogleSheet(worksheet ID 값 넣는곳);
    const languageList = ['아이디','설명'];

    return (
        <div>
            {data.map((row) => {
                return (<div>아이디: {row[languageList[0]]}, 설명: {row[languageList[1]]}</div>);
            })}
        </div>
    )

}

export default App;

 

React를 실행하면 정상적으로 받아오는 것을 확인할 수 있다.

 

---

Refereneces

thenewstack 사이트 - https://thenewstack.io/how-to-use-google-sheets-as-a-database-with-react-and-ssr