php 변수값 js로 넘기기

CSP 정책 때문에, 아니면 그냥 깔끔함을 위해 인라인 스크립트를 쓰고 싶지 않은 경우, 해당 데이터와 관련 있는 태그의 data 속성을 활용하기도 합니다.

예를 들어 목록의 각 아이템을 삭제하는 버튼을 만든다면

<button class="deleteItem" data-item-srl="<?php echo htmlspecialchars($item_srl); ?>">삭제</button>

별도 파일의 자바스크립트에서

$('.deleteItem').on('click', function() {
    var item_srl = $(this).data('itemSrl');
    exec_json('mymodule.deleteItem', { item_srl: item_srl }, function(data) {
        alert('삭제되었음메');
    });
});

이렇게 이벤트 핸들러를 별도로 선언하고 각 태그의 data 속성을 불러와서 처리한다면 버튼의 onclick 속성에 넣을 스크립트를 매번 직접 작성하는 것보다 훨씬 깔끔하지요.

data-item-srl
data('itemSrl')

이거 두개가 잘 읽히지가 않는데 어떤 사용법인가요?

혹시 잘못 적은거신지...

data('item-srl') 이런식의 사용을 했었는데 적어주신 것은 유추가 어렵네요.

HTML에서 data-abc-def-ghi라는 속성을 사용하면 jQuery에서 $('태그').data('abcDefGhi') 라는 문법으로 값을 읽어올 수 있습니다. 속성명에서 data-를 제외한 부분에서 하이픈은 빼고, 하이픈 다음 글자를 대문자로 바꿔서 인식합니다. (괴상한 치환 규칙이지만, 예전부터 CSS 속성을 JS에서 불러올 때 이런 규칙을 사용했기에 그대로 차용한 것으로 보입니다. margin-top 속성은 el.style.marginTop으로 불러오는 등...)

라이믹스에 포함된 구버전 jQuery에서는 하이픈 그대로 data('abc-def-ghi')라고 해도 되지만, 최신 버전에서는 지원하지 않는다고 하니 웬만하면 하이픈 빼고 대문자 쓰는 문법을 권장합니다.

물론 아무 속성에나 값을 집어넣고 attr()로 읽어올 수도 있지만, data-* 속성은 임의의 데이터를 주고받는 데 사용하라고 별도로 정해져 있는 규약이므로 비교적 짧은 이름을 사용하더라도 HTML5에 시도때도없이 추가되는 신규 속성들과 충돌할 위험이 없습니다.

네, 하이픈 다음 글자는 대문자로 쓰는 것이 표준입니다. 예전에 JS에서 CSS를 다뤄보신 분이라면 익숙할 텐데, 요즘 기준으로는 좀 뜬금없어 보이긴 하죠... 그냥 하이픈 없이 한 단어로 쓰는 게 최고입니다.^^