vue2에서 체크박스 메소드

구태여 모든 체크박스를 선택시, 모든 약관 동의에 해당하는 체크박스를 활성화시킨 건 UI 상 사용자에게 모든 약관에 동의했음을 한번 더 상기시키기 위함이다.

<template>
    <div class="terms-area">
        <div class="terms-line">
            <div class="check-wrap">
                <label>
                    <input id="allCheck" type="checkbox" v-model="allCheckInput" />
                    <span>모든 약관 동의</span>
                </label>
            </div>
        </div>
        <div class="divider"></div>
        <!-- 나머지 체크박스들 -->
        <div class="terms-line" v-for="(checkboxValue, index) in checkboxValues" :key="index">
            <div>
                <div class="check-wrap">
                    <label>
                        <input type="checkbox" v-model="checkboxValues[index].checked" />
                        <span>{{ terms[index] }}</span>
                    </label>
                </div>
                <span @click="checkboxValue.modalShow = true">약관보기</span>
                <modalDefault :modalInfo="checkboxValue.modalInfo" v-show="checkboxValue.modalShow"
                    @modalClose="checkboxValue.modalShow = false">
                    <div v-html="checkboxValue.modalText">
                    </div>
                </modalDefault>
            </div>
        </div>
    </div>
</template>
  
<script>
import modalDefault from '@/components/modal/modal-default.vue';
export default {
    components: {
        modalDefault
    },
    data() {
        return {
            //checkbox
            checkboxValues: [
                {
                    checked: true,
                    modalText: "이용약관 내용...",
                    modalInfo: {
                        modalTitle: "이용약관",
                        modalFull: false,
                        headerShow: true,
                        dimmed: true,
                    },
                    modalShow: false,
                },
                {
                    checked: true,
                    modalText: "개인정보 수집 약관 내용...",
                    modalInfo: {
                        modalTitle: "개인정보 수집 약관",
                        modalFull: false,
                        headerShow: true,
                        dimmed: true,
                    },
                    modalShow: false,
                },
                {
                    checked: false,
                    modalText: "마케팅 이용약관 내용...",
                    modalInfo: {
                        modalTitle: "마케팅 이용약관",
                        modalFull: false,
                        headerShow: true,
                        dimmed: true,
                    },
                    modalShow: false,
                },
            ],
            terms: [
                "이용약관 동의(필수)",
                "개인정보 수집·이용목적 및 항목에 동의(필수)",
                "마케팅이용약관 동의(선택)",
            ],
        };
    },
    computed: {
        allCheckInput: {
            get() {
                return this.checkboxValues.every((value) => value.checked);
            },
            set(newValue) {
                this.checkboxValues.forEach((checkbox) => {
                    checkbox.checked = newValue;
                });
            },
        },
    },
};
</script>

v-model이란

입력과 변경에 대한 데이터 반영이 엮인, 쌍방향 데이터 바인딩을 v-model이 기능해주고 있다.
v-bind와 v-on의 기능의 조합으로 사용자가 매번 지정하지 않아도 좀 더 편하게 해주는 문법인 것.

v-on

dom 이벤트가 트리거 될 때 js를 실행할 수 있는 이벤트 리스너. @로 작성하기도 한다. (ex) @click)
v-model을 v-on으로 대체 해야하는 경우는 언어 체계 때문에 코드 내에서 문자 인코딩, 유니코드 처리에 관해 다른 접근방식이 필요하기 때문. IME SW 라고 한다. (참고)

v-bind

ele 클래스 목록(:class)과 인라인 스타일(:style)을 조작하기 위해 일반적으로 사용한다.
클래스의 존재 여부가 데이터 속성의 참/거짓 속성에 의해 결정된다. (참고)

다시 v-model로 돌아와서...

• 텍스트 유형의 <input>과 <textarea> 경우, value 속성과 input 이벤트를 사용
• <i-nput type="checkbox">과 <input type="radio"> 경우, checked 속성과 change 이벤트를 사용
• <select>는 value를 속성으로 사용하고 change를 이벤트로 사용

내가 필요한건 checkbox 의 checked 속성.

'getter' 'setter'이 있는 computed

• get 메서드는 modelValue 프로퍼티를 반환하고 set 메서드는 해당 이벤트를 발생시킨다.
  computed 속성은 읽기 전용으로 사용되는 것이 일반적이기 때문이고, 해당 순서상으로는 dom이 그려지고 사용자가 작동을 해야 함수가 실행되는 차례다.

every()와 map() 메소드

• every() 메소드는 배열의 모든 요소가 주어진 조건을 만족하는지 확인하기 위해 사용
• map() 메소드는 배열의 모든 요소에 주어진 함수를 적용하여 새로운 배열을 반환

다시 내가 작성한 코드로 돌아와서...

data에서 return 되는 checkboxValues 배열 값은 v-model="checkboxValues[index]"에 바인딩되어 false 값이 전달되고 있다.

• every() 메소드는 배열의 모든 요소가 주어진 조건을 만족하는지 확인한다.
  this.checkboxValues.every((value) => value === true)는 checkboxValues 배열의 모든 요소가 true인지 확인

• map() 메소드 는 배열의 모든 요소에 주어진 함수를 적용하여 새로운 배열을 반환한다.
  여기선 set()에서 checkboxValues 배열의 모든 요소를 newValue 값으로 설정하여 모든 체크박스의 상태를 동일하게 변경.

※수정※
필수 선택 약관은 checked 값을 true로 두고 allCheckInput를 작동시키고 싶었기 때문에
.forEach를 사용하여 배열의 각 요소에 대해 동작을 수행하게 만들었다.

• get() 은 allCheckInput를 읽을 때 호출되는 함수입니다.
  get() 함수 내에서는 checkboxValues 배열의 모든 요소가 true인지 확인하여 결과를 반환.

• set(newValue) 는 allCheckInput에 값을 할당할 때 호출되는 함수로 newValue 값을 이용하여 배열의 모든 요소를 newValue로 설정한다.
  this.checkboxValues.map(() => newValue)는 checkboxValues 배열의 모든 요소를 newValue로 설정합니다.

참고 사이트

vue.js
v-model의 동작 원리와 활용 방법