Vue.js computed 속성에 파라미터 전달하기

Vue.js에서 `computed`속성을 사용하여 동적으로 계산된 속성을 이용 가능합니다. 이렇게 단순하고 간편하게 이용할 수 있지만 computed 속성을 파라미터를 전달받지 못하기 때문에 몇 가지 꼼수를 사용해야 합니다.

 

설명하기에 앞서 computed 속성에 직접적으로 파라미터를 전달하는 것이 지원되지 않는 이유 부터 간단하게 설명하겠습니다. `computed` 속성을 의존하는 데이터를 추적하여 해당 데이터가 변경될 될때 자동으로 계산이 됩니다. 이를 위해 `computed` 속성은 데이터 의존성을 명확하게 파악하여야 합니다. 하지만 파라미터를 통해 `computed` 속성에 외부 값이 전달되면 의존성 추적이 어려워 지고 값에 대한 일관성과 예측 가능성을 해칠 수 있기 때문입니다.

 

때문에 Vue.js에서는 파라미터를 전달하는 상황에서는 `computed`속성을 사용하기 보다 `methods` 속성을 사용하기를 권장하고 있습니다. 

 

그럼 `computed` 속성에 파라미터를 넘기는 방법에 대해서 예제를 보여드리겠습니다.

아래 예제는 index 파라미터를 넘겨야하는 상황입니다.

computed: {
	getCurrentIndex() {
    	return (index) => {
        	return index + 1;
        };
    }
}

이를 더욱 간략하게 나타내면 다음과 같습니다. 

computed: {
	getCurrentIndex() {
    	return index => (index + 1);
    }
}