[React Native] 안드로이드 앱과 구글 시트 연동(vscode로 개발)

 

해당 프로젝트는 안드로이드 앱과 구글 시트를 연동하여,

외부 데이터를 앱 화면에서 실시간으로 확인할 수 있는 기능을 구현하는 것이 목표!

앱을 실행하면 구글 시트에 저장된 데이터가 자동으로 불러와지고,

사용자가 ‘Refresh’ 버튼을 누르면 최신 데이터로 갱신되는 구조입니다.

데이터는 아래 구글시트에서 불러오는 것이 목표

구글시트의 data 내용이 바뀌면, 안드로이드 앱 상에서 실시간으로 새로고침 후 값이 변경되도록 개발

---

 

1. import

import React, { useEffect, useState } from 'react';
import { View, Text, Button, StyleSheet, ScrollView } from 'react-native';

 

2. 구글시트 연동

  const SHEET_URL =
    'https://docs.google.com/spreadsheets/d/1oJZmTKL(생략)f6XINL9jowCnZgPq4QO0/gviz/tq?tqx=out:json&sheet=Data';
//Data는 구글시트이름을 뜻함

 

3. 데이터 가져오는 법

  const fetchData = async () => {
    try {
      const response = await fetch(SHEET_URL);
      const text = await response.text();

      // JSON 부분만 추출
      const match = text.match(
        /google\.visualization\.Query\.setResponse\(([\s\S\w]+)\)/,
      );
      if (!match || !match[1]) throw new Error('JSON 파싱 실패');

      const json = JSON.parse(match[1]);
      const rows = json.table.rows
        .map(row => (row.c[1] ? row.c[1].v : null)) // B열 값만
        .filter(v => v != null);

      setColors(rows);
    } catch (error) {
      console.error('데이터 불러오기 실패:', error);
    }
  };

 

• Google Sheets에서 텍스트 데이터를 가져옴
• 정규식을 이용해 Google Visualization API가 감싸고 있는 JSON 부분만 추출
• JSON을 객체로 변환
• B열(row.c[1]) 값만 가져와 배열로 생성
• colors 상태를 업데이트하여 화면에 표시

 

4. 초기 데이터 로드 - 생략(아래 전체코드 첨부)

5. UI 렌더링 - 생략(아래 전체코드 첨부)

 

6. 구현 결과

---

최종적으로 앱이 정상적으로 구글 시트의 데이터를 반영하는 것을 확인하고
Refresh 버튼 하나로 데이터를 즉시 불러오는 모습을 보며,
굉장히 뿌듯했습니다..ㅎㅎ

 

이번 경험을 바탕으로,

앞으로 준비할 앱 프로젝트에도 자신 있게 도전할 수 있을 것 같습니다. ✨

---

전체 코드 참조

https://github.com/zooooss/P_Test

GitHub - zooooss/P_Test