$refs를 통해서 모달창 컨트롤 하기

vue component 안에서 vue-bootstrap을 이용해 모달창을 띄우고 닫는 기능을 만드는 데 ref를 사용한 것에 대해서 정리.

버튼을 누르면 모달창이 출력되고 그 안의 버튼을 누르면 특정 기능을 수행하고 모달창이 자동으로 닫아지는 기능.

vue-bootstrap의 b-modal을 이용하여 모달창을 만든다.
이 모달태그 속성에 ref 값을 줘서 모달창을 제어한다.
ref 속성은 바닐라 자바스크립트의 querySelector와 같은 개념이다.
다만, virtualDOM을 사용하는 vue 환경에서는 ref를 이용해 DOM을 직접 제어하는 방법은 좋은 방법이 아니라고 한다.
그리고 ref는 mounted 이후에 접근이 가능한 요소라는 것도 알아두어야 한다.

<b-modal
	id="confirm-modal"
    ref="confirmModal"
    hide-footer
>
	~~~~모달창 내용~~~~~
    <b-button
    	variant="primary"
        @click="특정기능함수"
    > 버튼텍스트
    </b-button>
</b-modal>


~
~
~
~
~
methods: {
	async 특정기능함수() {
    	try {
        	어쩌구저쩌구 내용
            this.$refs.confirmModal.hide()
        } catch (error) {
        	에러뜨면 토스트로 알려주는 내용
        }
    }
}

이렇게 설계를 했는데 bvModal 자체에 hide 기능이 있어서 생각해보니 이렇게 해도 되었던 것 같다. 기존에 짜여진 코드가 이런식으로 되어 있어서 따라 만들었는데 bModal 문서를 보니 this.$bvModal.show(id), this.$bvModal.hide(id)도 같은 기능을 한다고 한다.

https://bootstrap-vue.org/docs/components/modal