Vuejs, Computed에서 get, set 사용하기

 Vuejs를 사용하여 프로젝트들을 설계하고 개발한지 어언 2년이 넘어가고 있고, 빠른 개발을 위해 Vuejs 기반의 프레임워크를 구성하여 개발하는 것도 1년 남짓되어 가고 있다. 그 동안 Vuejs를 사용하면서 많은 배우게 되었고, 지금도 배울게 많다.

 

 이 중 충격적으로 다가오게된 요소가 있었는데, 바로 Computed에서 set이 된다는 것이다. 이걸 요근래 알게 되었다. Computed는 내부에 사용되는 요소들의 변경점을 감지하여 연관되어 가공하는 부분을 캐싱처리 형식으로 오로지 조회성으로만 사용될 것이라 생각했다.

 Frontend와 Backend로 나눠서 개발할 때, 서버에서 오는 데이터를 그대로 사용하고, 그 양식에 맞춰 그대로 전달하는 방식을 선호한다. HTTP Restful API 사용 간, 데이터 가공을 왠만하면 화면에서 하지 않으려고 한다.

 그런데, Backend가 레거시일 경우, 테이블을 예전 구조로만 사용해야할 경우가 많이 있다. 화면에서는 Checkbox로 대응하는 파라미터가 true/false가 아니라, 'X' 값 유무 처리로 사용하는 경우가 그 예이다. Vuejs 등 화면에서 Checkbox를 대응하여 사용하려면 GET일 때 'X'를 true로 변경하고, 다시 POST나 PUT으로 서버에 보낼 때, true를 'X'로 변환하여 보내는 것이다.

 

 이런식으로 변환을 한번 해야할 경우 개발간 누락하는 경우가 종종 있었고, 이 부분을 신경쓰면서 개발하는 것이 짜증이 나기도 했었다.

 

 이러한 사례를 풀어서 다시 설명하면,

1. 사용자가 직접 조회된 폼 내역을 수정하기 위해서 수정여부 Checkbox는 pmodi라는 파라미터와 대응된다.
2. pmodi 값은 DB에서 수정여부의 값으로 Character 1byte로 사용되며, 수정 체크할 경우, 'X' 값으로 저장된다.
3. 화면 Checkbox는 true/false로 사용된다.
4. 사용자가 해당 폼에 들어올 때, 내역 조회 시, pmodi값을 'X' 여부에 따라 true/false로 data()영역에 선언된 pmodiCheck에 값을 넣는다.
5. 사용자가 저장 버튼을 눌러 폼 내역이 저장 시, pmodiCheck의 값이 true/false 여부에 따라 pmodi에 'X'를 셋팅하여 전달한다.

 단순히, Checkbox를 사용하려면 이러한 과정을 거쳐야 하는 것이다. 나는 단지, 서버에서 온 값 그대로 data()에 넣어 사용하고, data() 내용 그대로 보내고 싶을 뿐인데...

 이러한 과정이 Computed의 set이 있다면 달라지게 된다.

pmodiCheck: {
  get() {
    return this.inputData.PMODI === 'X'
  },
  set (value) {
    this.inputData.PMODI = value ? 'X' : ''
  }
}

 pmodiCheck는 전과 동일하게 checkbox input의 v-model로 유지하고, 이제 pmodiCheck는 data()에서 빠진다. 그리고, Computed영역으로 이동한다. 그리고, 원래 사용하듯이 get 부분은 pmodi 값에 따라 true/false로 주고, checkbox가 변경되면 pmodi 값에 변경된 값이 true/false에 따라 'X'가 자동으로 들어가게 된다.

 

 아 깔끔해....

 

 단순히 Computed의 set 개념을 알게된거 하나만으로 몇가지 문제를 손쉽게 해결하는 방안이 되었다. 옛말에 멍청하면 손발이 고생한다고, 기본적인 부분을 모르고 넘어가면 이렇게 쉽게 해결할 일을 못하고 고생만 하게 된다.

Vuejs 문서를 자주 보지만, 이 사례로 계속 한번씩 보게 된다. 생각외로 공식문서의 업데이트가 빠르게 되고 있더라. 이제 곧 3버전이 나온다고 하는데, 벌써부터 기대가 된다.