0. 고민 하게된 이유 (바쁜사람은 1부터 보세요!)
이 고민은 저번주에 시작되었는데, 현재 인턴을 하고있는 회사에서는 Nuxt를 이용해서 개발하고 있기 때문이다.
테이블 형태로 상품목록을 보여주는 화면에서 상품들이
[{name:'사과',price:3000},{}...]와 같은 형태로 주어질때10000 이라는 숫자를 받으면, 10,000원으로 출력해야 하는 상황이었다.
맨처음에는 저번 인턴경험때 뭣도 모르고 {{item.price | comma}} 같은 형태로 뒤에 |comma 붙인게 생각나서 '아 이게 라이브러리를 쓴건가?' 하고 라이브러리를 찾아보려고 했는데, 다들
comma(val){
return String(val).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
}이런 매소드만 내밀어서 '아 method에 놓고 쓰는건가? 그럼 전역으로 쓰고싶으면 어떻게 써야하지?' 이런 고민을 시작으로 computed도 공부해보고 결국은 filter로 해결하였다.
이제부터 내가 경험한 computed와 filter를 각각 어디다가 쓰면 좋을지 이야기 해보려고 한다.
1. filter
필터는 동명의 자바스크립트 함수도 있지만 여기서 다룰것은 그건 아니고 Vue에서 텍스트 형식화를 위해서 지원하는 기능이다.
공식문서 : https://kr.vuejs.org/v2/guide/filters.html
전역으로 설정하기 위해서 Nuxt에서는
~plugins/filters.js
import Vue from 'vue'
Vue.filter('comma', val => String(val).replace(/\B(?=(\d{3})+(?!\d))/g, ','))nuxt.config.js
plugins: [
{ src: '~plugins/filters.js' },
],이렇게 2가지 파일을 수정하면 된다.
수정 후, {{10000 | comma}}를 출력해보면 10,000으로 나오는 것을 확인할 수 있다.
filter는 이런식으로 인자를 받아서 원하는 형태로 return 해주는 형식이라면,
computed는 인자를 받을 수는 있지만, 권장하는 형태는 아니다.
그러므로 v-for를 이용해서 화면을 출력할때 computed를 사용한다는 것은 잘 어울리지 않는 방식이다.
또 굳이 우리가 10,000이라는 조작된 형태의 문자열을 가지고 있을 필요가 없고, 그저 조작된 문자열을 화면에 출력할 용도로만 사용하기 때문에 filter가 이런 상황에서는 더 어울린다고 할 수 있다.
2. computed
computed는 다른 상황에서 많이 유용했었다.
예를 들어서, v-if="여기" 에 들어가야 하는 문장이 너무 지저분하게 길지만 꼭 필요한 경우에 나 같은 경우에
is컴포넌트이름Visible(){
return 지저분한 조건문
}v-if="is컴포넌트이름Visible"
형태로 작성하니까 html안에서의 가독성도 좋아지고, 이 조건문을 method에서도 필요하다면 쓸수 있어서 굉장히 편했던 경험이 있다.
또 상황에 따라 간단하게 바뀌어야 하는 문자열들을 관리하기에 편리했다.
예를 들어, 사용자의 이름을 입력받을 때 기존에 이름에 대한 정보가 있다면 input 창의 placeholder 내용을 사용자의 이름으로 하고, 없으면 '이름을 입력하세요' 로 하고 싶다면 간단하게
namePlaceholder(){
if(this.userName == ''){
return '이름을 입력하세요'
} else{
return this.userName
}
}형태로 computed안에 정의하여 사용하면 될것이다.
method와의 차이점이 있다면 사용 시 뒤에 ()를 붙이지 않아도 되어 깔끔하다.
그리고 안에서 쓰이는 종속대상들이 바뀔 때 마다 실행이 되는데, 종속 대상을 따라 결과가 캐싱되기 때문에 불필요한 연산을 많이 줄여준다는 장점을 가진다.
하지만 몇 가지 주의점이 있다면, 인자를 가지지 않는 형태를 권장하고, 간단한 연산만을 하는 형태를 권장 한다는 것이다.
