React프로젝트에서 D3를 사용하기 (D3 with React)

날짜 : 2017. 12. 07.(목)

React프로젝트에서 D3를 사용하기 (D3 with React)

1. 생각하게 된 동기

1. 프로젝트를 React를 진행하고 있는데, 챠트를 사용해야 한다.
2. React의 어느 부분에서 선언을 해서 사용해야 하는지 모르겠다.

2. 생각하게 된점

직관적으로 생각해서 시도를 해보고 그것을 바탕으로 개선점을 찾는 것이 더 효율 적이다.
고민만 가지고 실천을 하지 않으면 안된다.

1. React, D3 둘다 DOM조작을 한다.

   • component의 render return 전에 D3를 사용해도 정상적으로 작동이 되지 않는다.
   • component의 바깥에서 D3를 사용해도 정상적으로 작동이 되지 않는다.
   • react에서 D3의 DOM 조작을 수행하지 못하게 하기 때문 이라고 생각(정확하게 동작되는 원리 및 장소를 알지 못하겠다.)

2. D3를 사용하기 위한 방법 몇 가지 (참고 : React에서 D3.js. 사용하는. 방법)

   • 외부 라이브러리를 사용하는 방법 (react-d3, react-faux-dom)
   • react와 d3만을 가지고서 사용하는 방법
     1. react에서 모든 돔조작을 한다. (=JSX로 SVG tag를 넣어서 사용한다.)
     2. D3에서 모든 돔조작을 한다. (최초 1번만 render를 react에서 수행하고 이후에는 d3에서 수행하도록 구성한다.)
     3. react가 축, 컨테이너, 범례 등 고정부분을 render하고 D3가 데이터, 애니메이션 부분을 수행

3. 기타

   • 라이브러리를 사용하면 제공해주는 예제는 간단하게 수행을 할 수 있다.
   • 하지만 종속성을 가지고 있기에 버젼업에 되어감에 따라 빠른 대응을 해줄수 있는지가 이슈로 남아있다.
   • 그래서 라이브러리를 사용하기 보다는 기존 모듈만을 가지고 사용할 수 있는 방법을 생각해 보았다. (실제 github의 star가 적기도 하였다.)
   • 그리고 react에서 d3를 사용하는 것은 시기 상조 일지도 모르겠다는 생각이 든다.(최근 좋은 평가를 받고있는 프레임워크 전체의 공통적인 문제 일지도 모르겠다.)