차트 라이브러리 사용 계기

사용자가 작업(공부, 일 등)을 얼마나 했는지 하루 단위로 확인하고 시간 달성이라는 목표를 위해 더욱 노력할 수 있도록 차트를 보여주려고 했다.

리액트 네이티브에서 사용할수 있는 차트 라이브러리는 보통 react-native-svg를 기반으로 하고있고, 기능이나 사용면에서는 큰 차이가 없어보였다.
사용자 수를 고려했으면 react-native-chart-kit을 써도 되었을것 같은데,
차트 라이브러리를 처음 경험해보는 입장이기 때문에 정말 자세한 사용예시가 있는 react-native-gifted-charts를 선택하게 되었다.

react-native-gifted-charts

(이하 gifted-charts 라고 함)

react-native-gifted-charts npm 페이지
react-native-gifted-charts 레퍼런스 페이지

레퍼런스 페이지는 이런식으로 정말 자세히 되어있다.
코드와 실제 적용화면을 예시로 보여주기 때문에 정말 큰 도움이 되었다.

무한 스크롤

사용자가 우리의 타이머로 매일매일 성실하게 2년동안 기록했다면?
일별 작업시간 데이터를 한번에 불러오는건 앱에 무리를 줄 수 있다고 판단했다.
일주일 단위 정도로 적당히 보여줄 수 있으면 좋을텐데! 그래서 무한 스크롤을 구현하기로 마음먹었다.

아쉽게도 gifted-charts 내에서는 무한 스크롤을 따로 지원하지는 않는다.
그러나 onEndReached, onStartReached와 같은 props가 있으니 무한스크롤을 직접 구현할 수 있다.

이건 사용 예시 페이지에 따로 나와있지는 않지만, props table을 보다보면 사용 예시보다 더 많은 기능들이 존재함을 알 수 있었다.

onEndReached - 차트의 끝에 다다르면 호출되는 콜백을 지정할 수 있음
onStartReached - 차트의 처음에 다다르면 호출되는 콜백을 지정할 수 있음

이 중에서 나는 최근 7일간의 데이터만을 미리 불러와 차트에 보여주고, 사용자가 차트 맨 앞으로 스크롤(onStartReached 사용)했을때 이전 7일간의 데이터를 추가로 계속 불러오는 방식으로 구현했다.

구현하기

const baseDay = 7; // 오늘 날짜 포함 7일

일단 불러올만큼의 기준일수를 지정해준다. 일주일 단위로 불러올거라 7일로 설정해주었다.
useState를 사용하지 않은 이유는 이 숫자는 동작 내에 바뀔일이 없으며, 렌더링을 위해 관리해주어야 하는 상태값도 아니기 때문이다.

const userTimerData = await getTimerData(
      uid,
      subtractDaysFromDate(baseDate, baseDay), // 기준일자에서 기준일수 빼주는 함수
      baseDate,
    ); // 2번째 인수(시작날짜)부터 3번째 인수(종료날짜)까지의 사용자 데이터를 가져온다

    if (userTimerData) {
      const arrLength = timerData.length - 1;
      setTimerData(userTimerData);
    }

맨 처음 차트를 그릴때 사용자 데이터를 가져오는 함수이다.
기준일자가 되는 baseDate는 오늘 날짜를 초기값으로 가진다.
오늘 날짜부터 7일만큼(오늘 포함)의 데이터를 가져오는 것이다.

예를 들어 오늘이 5월 30일이면, 5월 24일~5월 30일의 데이터를 가져온다.

  const getMoreUserTimerData = async () => {
    // 새로운 baseDate 설정 후 또 n일치 불러옴
    const newBaseDate = new Date(
      new Date(baseDate).setDate(new Date(baseDate).getDate() - baseDay),
    );

    const userTimerData = await getTimerData(
      uid,
      subtractDaysFromDate(newBaseDate, baseDay),
      newBaseDate,
    );

    if (userTimerData) {
      if (userTimerData.length !== 0) {
        setTimerData([...userTimerData, ...timerData]);
        setBaseDate(newBaseDate);
      } else return;
    }
  };

사용자가 차트의 처음부분에 다다르면 새로운 기준일자(지금 기준일자로부터 7일 전)를 만들고, 다시 처음 차트를 그릴때와 같이 사용자 데이터를 불러온다.
그 다음 사용자의 7일치 데이터 배열 앞에 새로운 데이터를 이어붙인다.
그리고 기준일자를 새로운 기준일자로 업데이트한다.

이어서 예를 들면, 새로운 기준일자인 5월 23일을 만들고 5월 17일~5월 23일의 데이터를 가져온다.
그 뒤, 기준일자를 만들어둔 기준일자인 5월 23일로 업데이트한다.

    <BarChart
      ...
      data={timerData}
      onStartReached={() => getMoreUserTimerData()}
    />

생략된 부분이 많지만, 어쨌든 차트 컴포넌트는 이런식으로 되어있다.
onStartReached를 통해 timerData를 업데이트하고,
사용자의 데이터를 담은 timerData는 state로 관리되어 업데이트마다 새롭게 렌더링되어 무한 스크롤을 구현할 수 있다.

작동예시