v-model, 계산된 속성을 양방향으로!

v-model?

vue에서 기본적으로 제공하는 폼 입력 바인딩으로, input과 textarea 엘리먼트에 양방향 데이터 바인딩을 생성해준다. 프로젝트 시 다양하게 사용이 가능한 바인딩으로 작업시 사용은 편리하지만 부분적으로 어려운 바인딩이라고 느꼈었다. 먼저, input과 textarea를 제외한 v alue, checked, selected는 기본적으로 속성을 무시하기 때문에 Vue 인스턴스 데이터를 원본 소스로 취급한다. 그렇기때문에 'data' 옵션 안에 있는 JavaScript에서 초기값을 선언을 꼭 진행해야한다. 여기까지는 공식문서에 적혀있었기 때문에 그렇게 어렵지 않았다.

 

문제는 다음에 발생했다.

 

 

---

 

 computed 양방향 오류?? 

 

프로젝트를 진행하면서 약관동의 전체체크 로직을 짜고 있을때였다. 기능에서 별 문제없이 진행이 되고있던 중 console창을 열어보니 빨간색 오류가 뜨고 있었다.

isAllChekced 값은 할당되었지만 setter가 없다고 한다.

해당 오류를 구글 검색창에 입력하여 여러번 검색을 해본 결과, setter를 사용하여 양방향 계산을 진행해야한다는 글이 쏟아졌다. 제대로 이해는 어려웠지만  computed를 사용하여 그냥 methods처럼 작성을 할 때, 양방향으로 자동 처리가 되지 않는 오류가 발생한다는 것이였다. 😭 해당 부분에 대해서는 공식문서를 좀 더 참고해야한다.

 

 

 

---

 

 setter가 뭘까? 

 

setter가 도대체 뭐길래 값이 들어오지 않았다고 오류가 뜨는걸까? setter를 이해하려면 computed가 동작하는 원리를 이해해야한다.

 

computed의 원리 /출처(http://man.hubwiz.com/docset/VueJS.docset/Contents/Resources/Documents/vuejs.org/guide/reactivity.html)

 

computed는 내부에 저장된 함수가 입력된 함수값에 종속되어 값을 계산한다. 입력된 함수값에 의존한다는 의미로 사용되는데 공식문서에서도 언급되는 부분이다. computed는 내부적으로 Object.defineProperty를 통해 정의되는데 이 익명함수가 getter로 설정된다. getter를 통해 종속성을 추적한 후,setter을 통해 변경을 알린다. setter는 랜더되는 값을 보여주는 부분으로 이해했다.

 

해당 부분에 대해서는 해당글을 읽으면 더욱 도움이 될 것이다. 

 

 

 

---

 

 

 오류를 수정해보자! 

 

자, 그럼 결론적으로 오류를 수정해보도록 하자! 먼저 기존에 작성했던 코드를 보도록 하겠다. 아래의 코드는 computed에 작성한 함수다.

 computed: {
  isAllChecked(){
   	return this.agreeList.every(function(item){
      return item.checked;
  });
},

해당 함수와 연동되는 값은 아래처럼 데이터에 담아놓았다.

data:()=>({
    pageName:'agree',
    agreeList: [ 
      { id: 1, name: '약관 동의1', importance: '(필수)', checked: false}, 
      { id: 2, name: '약관 동의2', importance: '(필수)', checked: false}, 
      { id: 3, name: '약관 동의3', importance: '(필수)', checked: false}, 
      { id: 4, name: '약관 동의4', importance: '(필수)', checked: false}, 
    ],
 selected: [],
 selectAll: false,

list의 값은 v-for를 이용하여 반복을 해놓은 상태이며, 체크박스로 구성되어 있다. 양방향 computed 방식으로 수정을 해보자! 양방향으로 쓰는 방식은 아래와 같다.

<input v-model="model함수명">

computed: {
  model함수명: {
    get () { // get: computed 함수가 했던 로직을 대신 선언(computed 속성을 인스턴스 템플릿에서 호출했을 때 사용)
      return 사용할 로직
    },
    set (value) { // set : computed 속성에 전달하는 값을 받을 수 있도록 함수를 선언
      보여줄 값에 대한 로직
    }
  }
}

사실 해결한 방법이 제대로 된 방법인지 알수가 없다. 이중function을 썼기때문에 생긴 문제라는건 알겠는데😂양방향 방식으로 작성했더니 오류가 사라졌다!

computed: {
    isAllChecked:{
      get () {
        return this.agreeList.every(function(item){
          return item.checked;
        });
      },
      set(newValue){
        
      }
 },

 

 

혹시 틀린부분이 있거나 부족한 부분이 있다면 댓글 부탁드립니다!