유저들이 보는 Admin Page Dashboard에 앱을 사용한 시간을 데이터로 사용해서 chart로 나타내려고 한다.
chart는 라이브러리를 사용하기 위해 chart 라이브러리에 대해 공부를 해보니 SVG 기반과 Canvas 기반으로 나누어져
있었고, 각 기반이 어느 경우에 적합한지도 알 수 있었다.
SVG와 Canvas에 대해 공부한 것은 다음 블로그 글 작성으로 넘기겠다.
SVG와 Canvas에 대해 알아봤고, 어느 경우에 어떤 기반의 차트 라이브러리를 적용해야하는지 또 나에게 필요한 기능을
제공해주는지를 기준으로 잡았다.
기업협업을 진행 중인 기업의 대표님과 대화 끝에 나온 결과는
데이터 수는 적다.(연간 차트. 1년치 전체 차트에서 월별 사용량)
스타일을 custom해야 한다.
위 2가지다.
위 2가지의 조건을 충족한다고 생각해서 현업에서 널리 쓰이고 SVG기반인 highchart를 사용하기로 판단했다.
highchart를 프로젝트에 적용하는 방법은 CDN방법으로 script태그를 사용하거나, 패키지로 설치한다.
CDN방법으로 하기 위해 공식 문서에서 제공해주는 script태그를 복사해서 프로젝트에 붙여 넣었다.
그리고 차트를 렌더링해야하는 컴포넌트에 차트를 렌더링하는 함수를 작성했다.
에러가 발생한다.(not a function!!)
에러가 발생해서 구글로 검색해보니 highchart 라이브러리에서 jQeury를 사용할테니 highchart script 태그보다 위에 jQeury script 태그를 작성하라는 것이다.
바로 적용을 해보았다.
결과는 똑같은 에러…
패키지로 설치하면 되려나?? 생각해서 script 태그들을 주석처리하고 yarn으로 설치했다.(패키지 설치 후에는 항상 빌드를 다시하고 서버 실행도 다시)
두근두근 차트가 뜨겠지?? 하고 봤는데 CDN방법으로 했을때 발생한 에러가 그대로 발생한다.
에러는 바로…!!!!
그래서 어디쪽에서 문제가 발생하는걸까 생각해봤는데…
순간적으로 머리에 떠오른게 함수형 컴포넌트의 lifecycle이었다.
클래스형 컴포넌트와는 다르게 함수형 컴포넌트는 컴포넌트 자체가 다시 렌더링 되고, 또 함수 바디 -> return이 기본적이고, useEffect hook을 사용한다면 return 다음 순서이다.
에러의 이유는 차트를 렌더링하는 함수를 함수 바디에서 해줬기 때문이었다.
userEffect hook을 사용해서 useEffect의 매개변수로 넣어주니 에러없이 잘 렌더링된다.