React로 구글 애널리틱스 차트 렌더링하기

회사에서 페이지 리뉴얼 프로젝트를 담당하게 됐다.

피그마로 기획+디자인을 한번에 하고 천천히 살펴보면서, 전체 페이지에 반복 사용되는 요소들이 많으니까 React를 사용해서 컴포넌트 기반으로 작업하는게 훨씬 효율적일 것 같다고 생각했다. 카드나 버튼 컴포넌트는 그동안 공부하면서 프로젝트를 통해 많이 사용해봤는데, 통계 그래프를 보여주는 페이지들에 구글 애널리틱스 차트를 사용한다고 해서 고민이었다.

"이거 한번도 사용해본 경험이 없는데 React로는 어떻게 렌더링을 해야할까?"

사수님이 차분하게 가르쳐주신 내용을 토대로 chatGPT한테 물어봐서 해결했다.

---

React에서 구글 차트 사용하기

1) React에서 구글 애널리틱스 차트를 사용하려면, 일단 라이브러리를 설치해야 한다.

$ npm install react-google-charts

2) 구글 차트 갤러리에서 원하는 차트를 선택한다.

https://developers.google.com/chart/interactive/docs/gallery?hl=ko

차트 갤러리  |  Charts  |  Google for Developers

3) 특정 차트를 선택해서 설명을 읽다보면 [JSFiddle에서 직접 코딩] 이라는 버튼이 있다.

해당 버튼을 클릭하면 코드 에디터가 나오고 HTML, JS 코드를 알려준다.

JS 코드를 chatGPT한테 React로 변환시켜 달라고 요청했다.😆

파이형, 막대형 등 어떤 모양의 차트를 사용하는지에 따라서 세부적인 코드가 달라진다.

하지만 기본적으로는 useRef로 DOM 요소에 접근하고, useEffect에서 데이터와 옵션을 입력해서 사용한다.

---

파이형 그래프 렌더링 (예시)

1) React, useEffect, useRef 를 import 한다.

2) 함수형 컴포넌트 내부에 useRef부터 정의한다. DOM 요소에 접근해서 그래프를 출력시켜야하기 때문!

const chartRef = useRef(null);

3) 이제부터는 useEffect를 사용해야하는데, useEffect 내부에는 3가지 함수가 들어간다.

→ 구글 차트 불러오기, 구글 차트 그리기, if문으로 스크립트 태그 작성하기

각 코드의 의미는 아래와 같다.

---

구글 차트 불러오기

// 구글 차트 불러오기
const loadGoogleCharts = () => {
  window.google.charts.load('current', { packages: ['corechart'] });
  window.google.charts.setOnLoadCallback(drawPieChart);
};

• window.google.charts.load → 브라우저 전역에서 '구글' 객체의 '차트' 속성으로 구글 차트 라이브러리를 로드할거야!
• current → 최신 버전으로
• { packages: ['corechart'] } → 기본 패키지를 가져올거야!
• setOnLoadCallback() → 구글 차트가 로드되면 메소드 안에 인자로 들어간 함수를 실행해라!

---

구글 차트 그리기

const drawPieChart = () => {
  const data = window.google.visualization.arrayToDataTable([
    ['Fruit', 'People'],
    ['Apple', 11],
    ['Banana', 5],
    ['grape', 7],
  ]);
  
  const options = {
    title: 'Favorite Fruit',
    colors: ['red', 'orange', 'purple'],
  };

  const chart = new window.google.visualization.PieChart(chartRef.current);
  chart.draw(data, options);
};

이 코드는 4가지 부분으로 구성되어 있다.

1. 데이터: 어떤 정보를 그래프에 그릴 것인지
2. 옵션: 그래프를 어떻게 그릴지
3. 위치: 어디에 그래프를 그릴 것인가
4. 명령: 위 3가지 정보를 조합해서 실제로 브라우저에 그래프를 그려내라!

const data = window.google.visualization.arrayToDataTable([
  ['Fruit', 'People'],
  ['Apple', 11],
  ['Banana', 5],
  ['grape', 7],
]);

const options = {
  title: 'Favorite Fruit',
  colors: ['red', 'orange', 'purple'],
};

• visualization: 구글 차트에서 데이터를 시각화하는 기능을 모아놓은 객체
• arrayToDataTable(): 배열을 차트로 변환하는 함수. 2차원 배열을 받아서 구글 차트가 이해할 수 있는 그래프 형식으로 변환해준다.
• window.google.visualization.arrayToDataTable(): 브라우저 전체에서 arrayToDataTable()에 인자로 들어가는 배열을 구글 차트를 사용해서 시각화할 수 있는 데이터로 변환할거야!
• '옵션'의 경우에는 구글 차트 문서 아래쪽의 [구성 옵션] 부분을 확인해서 설정하면 된다. 여기서는 차트의 제목과 컬러를 지정했다.

const chart = new window.google.visualization.PieChart(chartRef.current);
chart.draw(data, options);

• const chart = 브라우저 전역에서 구글 차트 중에 '파이형 차트'로 시각화할거야!
  → chartRef.current: 그래프가 그려질 위치를 지정한다. chartRef는 useRef로 만든 참조 객체, current는 실제 DOM 요소 위치를 찾기 위해 필요하다.
  ★ useRef로 만든 객체에서 실제 값을 얻으려면 current 속성을 통해 접근해야 한다.
• chart.draw() : 위에 지정한 데이터와 옵션을 넣어서 차트를 그려내라!

---

if문으로 스크립트 태그 작성하기

if (!window.google) {
  const script = document.createElement('script');
  script.src = 'https://www.gstatic.com/charts/loader.js';
  script.onload = loadGoogleCharts;
  document.body.appendChild(script);
} else {
  loadGoogleCharts();
}

일반 HTML, JS로 구글 차트를 렌더링할 때는 HTML에서 script 태그로 구글에서 제공하는 JS 파일을 불러오면 된다. 구글 차트 문서에서 코드 에디터를 열어보고, 이걸 React로는 어떻게 작성해야할지 고민하게 만들었던 부분이 여기였다. 실험에 성공한 코드를 자세히 살펴보니까, 결국 JS에서 DOM 요소에 접근해서 HTML 코드를 작성하는건데 괜한 고민을 했었구나 싶다.😂

• !window.google → 만약에 브라우저 전역에 '구글' 속성이 없으면
• script.onload → 스크립트가 완전히 로드되면 loadGoogleCharts() 자동 실행(즉시 실행되면 안되니까 괄호 없음)
• else절은 if문의 반대니까 → 브라우저 전역에 '구글' 속성이 있으면 loadGoogleCharts() 바로 실행

---

여기까지가 구글 애널리틱스 차트를 React에서 렌더링하는 방법이었다.

지금 막대형, 라인형, 테이블형까지 다른 디자인의 차트도 React에서 어떻게 렌더링하는지 실험하는 중이다. 빨리 실험 끝내고 퍼블리싱 작업 시작해야지!👏

실험 결과는 아래 레포에 있습니다!😉

https://github.com/hjinn0813/googlechart-react

GitHub - hjinn0813/googlechart-react