스코프 & 클로저 & this 개념말고 실전 (feat. vue)

스코프와 클로저 그리고 this를 모두 적절하게 이용한 코드를 보면서 이해해 보자!

let that = this;

기본적으로 this는 window를 가르키지만 vue에선 보통 현재 컴포넌트를 가리킨다!

그런데 굳이 this를 that에 할당한 이유는 클로저 때문이다..!

 

선언당시에 참조범위는 created(){} 블록이며

 

axios({}) 비동기 통신 로직안에 this( vue 컴포넌트 data ) 속성 상태에 변화를 주고 싶어서 아래처럼 코드를 짰다!

 

that에 할당한 this(vueComponent)는 axios 블록안에서도 스코프 체인에 의해 vueComponent를 가리켜

컴포넌트 상태(data)에 바로 변화를 줘 바로 렌더링 될 수 있도록 한다.

 

data() {
    return {
        lineChart: {
            data: null,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                hover: {
                    mode: 'nearest',
                    intersect: true
                },
                tooltips: {
                    mode: 'index',
                    intersect: false,
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero:true
                        }
                    }]
                }
            }
        },
        yesterdayData:{
            date:'2022-01-01',
            reqCount:null,
            workCount:null,
            paidAmount:'50000'
        }
    }
},


created(){
    let that = this; // console.log(this) => vueCompnent

    // 어제 ~ 2주일 전 데이터 조회
    let endDate = new Date();
    endDate.setDate(endDate.getDate() - 1) 
    let startDate = new Date(endDate);
    startDate.setDate(endDate.getDate() - 14); 

    endDate = endDate.toISOString().substr(0,10).replace(/-/g, '');
    startDate = startDate.toISOString().substr(0,10).replace(/-/g, '');

    axios({
        url: '/api/v1/dashboard',
        method: 'post',
        data: {
            start_date: startDate, 
            end_date: endDate
        }
    }).then(function(res){
    	// console.log(this) => undefined 클로저로 인해 선언 당시 참조값
        // console.log(that) => 스코프 체인에 의해 vueComponent
        let reqDateCountList = res.data.reqDateCountList;
        let workDateCountList = res.data.workDateCountList;

        let labels=[];

        let reqCount=[];
        reqDateCountList.forEach( function(item) {
            let cal_date = item.cal_date;
            let format_date = cal_date.substr(0,4) + '-' + cal_date.substr(4,2) + '-' + cal_date.substr(6,2)

            labels.push(format_date);
            reqCount.push(item.count);
            that.yesterdayData.date = item.cal_date;
            that.yesterdayData.reqCount = item.count;
        });

        let workCount=[];
        workDateCountList.forEach( function(item) {
            workCount.push(item.count);
            that.yesterdayData.workCount = item.count;
        });
        that.lineChart.data = {
                labels: labels,
                datasets: [{
                    label: '접수건수',
                    backgroundColor: 'rgba(52, 143, 226, 0.2)',
                    borderColor: '#348fe2',
                    pointBackgroundColor: '#348fe2',
                    pointRadius: 2,
                    borderWidth: 2,
                    data: reqCount
                }
                , {
                    label: '작업건수',
                    backgroundColor: 'rgba(255, 0, 0, 0.2)',
                    borderColor: '#ff0000',
                    pointBackgroundColor: '#2d353c',
                    pointRadius: 2,
                    borderWidth: 2,
                    data: workCount
                }
                ]
        }
    });
}