[JavaScript/jQuery] 모달 이벤트 비교

 안녕하세요 코북입니다. 이번 3월 패치에서 모달 이벤트를 많이 다루게 되었는데 개발 일정을 맞추려다 보니 대부분의 작업을 jquery로 처리했습니다. 개발 전 목표는 javascript와 적절하게 섞어서 개발하는 것이었기 때문에 아쉬움이 많이 남습니다. 다음 개발 때는 좀 더 유연하게 javascript와 jquery를 활용하기 위해 두 가지 방식으로 나누어 기술해보려 합니다.

 

1. 모달 열기, 닫기 이벤트

// jQuery
$('#modal').modal("show"); // 열기
$('#modal').modal("hide"); // 닫기

// JavaScript
var modal = document.getElementById("modal");
modal.style.display = "inline-block" // 열기
modal.style.display = "none" // 닫기

 

 

2. 모달 열 때 값 초기화

// jQuery
$('input[name="radio"]').prop('checked',false); // radio
$('#textarea').val(''); // textarea

jqeury의 경우 attr()과 prop()을 통해 특정 속성에 접근하게 되는데, attr()의 경우 element의 최초 속성 값이나 정보를 조회하는 경우 사용하면 되고, prop()의 경우 element의 속성 값을 확인하거나 변경하는 경우 사용하면 됩니다. 말이 비슷해서 조금 헷갈리는데, 예를 들면 attr()은 style, src 등의 속성 값에 접근할 때 사용하면 되고, prop()은 form 요소의 disabled, selected, checked와 같은 속성 값에 접근하는 경우 사용하면 됩니다. 어렵네요..

// JavaScript
document.getElementById("textarea").value=''; // textarea

const radio = document.getElementsByName('radio'); 
for(var i = 0; i < radio.length; i++){
    radio[i].checked = false;
} // radio

 

 

3. radio 값 가져오기

// jQuery
var temp = $(:radio[name="radioName"]).is(':checked'); // 체크 여부
var temp = $(:radio[name="radioName"]:checked).val(); // 체크된 값

var temp = $('input[name="radioName"]').is(':checked'); // 체크 여부
var temp = $('input[name="radioName"]:checked').val(); // 체크된 값

// JavaScript
var temp = document.querySelector('input[name="radio"]').checked; // 체크 여부
var temp = document.querySelector('input[name="radio"]:checked').value; // 체크된 값

 

 

4. 모달창으로 값(데이터) 전달

<!-- 본문 -->
<button type="button" onclick="javascript:dataTransfer(this)" data-cobook="ABCDEFG" id="btn">코북</button>

<!-- 모달 -->
<div class="modal" id="mod">
    <div class="modal-body">
	    <input type ="hidden" id="co_id" value="" />
    </div>
</div>

// jQuery
function dataTransfer(obj){ 
    var cob = $(obj).data('cobook'); // button태그의 data-cobook에 매핑된 값인 "ABCDEFG" 값이 변수 cob에 들어간다
    $('#co_id').val(cob); // 모달 내 해당 id의 value를 "ABCDEFG" 로 변경해준다
}

var exCob = $('#co_id').val(cob); // 모달의 해당 값에 접근하면 "ABCDEFG" 값을 가져올 수 있다

// JavaScript
function dataTransfer(obj){
    var cob = document.querySelector('#btn');
    document.getElementById('co_id').value = cob.dataset.cobook; // type1
    document.getElementById('co_id').value = cob.dataset['cobook']; // type2
    // DOM객체의 dataset 속성을 참조하여 두 가지 방식으로 접근이 가능하다
    // 이때 cob.dataset은 DOMStringMap으로 데이터를 가지고 있습니다.
}

var exCob = document.getElementById('co_id').value;

자바스크립트의 데이터 속성을 이용해 모달 창으로 값을 전달합니다. 전달하는 값은 제가 임의로 data-cobook으로 만들었지만 data-value, data-id 등 원하는 이름으로 자유롭게 만들 수 있고 여러 데이터 속성을 동시에 사용할 수 도 있습니다. 함수에서 주의할 점은 this가 무엇인지 잘 명시해줘야 값을 가져올 때 모호함을 없앨 수 있습니다. 

 

 

배운 점

 

자바스크립트와 제이쿼리의 사용법을 각각 비교해보면서 그 차이를 인지할 수 있었고, 두 방법을 사용함에 있어 유연성을 기를 수 있던 시간이었습니다.

22.04.06 radio 값 가져오기 수정했습니다. ※ 출처 : https://congsong.tistory.com/42

 

 

 

본 글은 아래 링크의 내용을 참고하여 학습한 내용을 나름대로 정리한 글임을 밝힙니다.

http://www.tcpschool.com/css/css_position_display

https://ungdoli0916.tistory.com/760

https://hianna.tistory.com/426

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

https://oneshottenkill.tistory.com/301