[Vue.js] vue 2.0 에서 LifeCycle에 대한 삽질 후기 (Error in mounted hook)

1. 하고자 했던 것

- 회사에서 하는 프로젝트를 진행 중에 Vue.js 2.0 버전 내 echart 라이브러리를 도입해야 하는 일이 생겼다.

- 회사에서 진행하는 프로젝트는 특이하게도 구 버전인 Vue 2.0 버전과.. 2.0버전과 호환성을 보장할 수 없는 Typescript를 사용하여 개발중이다.

- 무튼..

- 도입을 위해 echart라이브러리를 dependency에 추가했다.

- 이후 component화를 위해 아래와 같은 .vue 파일을 만들었다.

- 도넛 차트를 그려보고 싶었고, view파일에서는 Props 로  형식에 맞는 option 을 전달만 하면 되게 하고싶었다.

 

- 아래는 전달하는 View 파일에서 Component를 사용하는 모습

 

2. 문제의 시작

- 해당 option변수를 props로 넘겨주면, 받는 Component 의 created hook에서 찍었을 때 해당 옵션이 잘 찍혔다.

그래서 아래와 같은 메서드를 만들고, 해당 값을 사용하여 차트를 생성해보려고 했다.

 

@Prop()
  public option!: echarts.EChartsOption;
  created() {
    this.initChart();
  }

  initChart = () => {
    const temp = document.getElementById('echart-graph') as HTMLDivElement;
    const myChart = echarts.init(temp);
    myChart.setOption(this.option);
  };​

 

 

- 결과는 ? 

 

- OK, dom이 그려지기 전에 getElementById를 했구나. mounted에 시도해보자

mounted() {
    console.log(this.option);
    this.initChart();
  }

- 결과는 ? 

- OK option 변수가 mounted시점에 값이 들어와있지 않구나..?

- 그런데 생각해보니 아까 created 에서 찍어 봤을 때(mounted보다 이전 시점..) 잘 들어있었는데?

(조금 전에 적은 글..)

 

3. 문제의 해결

- 여러 번의 시도 끝에 아래와 같은 내용으로 잠정 결론을 지었다.

(정확하게 맞는 설명인지는 모르겠다.)

"method로 선언해놓은 initChart() 내부에, 

Props로 전달받은 this.option을 넣어놓았다.

그런데 이 initChart() method는 this.option 변수에 값이 할당되기 전에 컴파일되므로,

이후 이 method를 호출할 때 오류가 발생해버린다."

 

- 아래와 같이, mounted에서 인자로 this.option 변수를 전달해서 method를 실행해보니 정상 동작했다.

  mounted() {
    console.log(this.option);
    this.initChart(this.option);
  }

  initChart = (_option: echarts.EChartsOption) => {
    const temp = document.getElementById('echart-graph') as HTMLDivElement;
    const myChart = echarts.init(temp);
    myChart.setOption(_option);
  };

4. 결론

lifecycle hook과 compile time간의 시점에 대해 조금 더 경험해보고 이해하고 있어야 이런 삽질을 줄일 수 있겠다.