재사용성에 대해서

4개의 묶음데이터를 각각의 모달 페이지에 보내야하는 코드를 짜다보니 html 코드가 너무 길어지고 쓸데 없이 많은 코드가 사용된다는 생각이 들었다. (모달의 특성상 새로고침을 할 수도 없다) 방법을 고민하던 중 javascript 객체에 innerHTML 코드를 사용하면 바로 텍스트 값을 변경할 수 있다는 것을 알아냈다.

<script>
// 모달로직을 수행하기 위한 javascript object들
    const body = document.querySelector('body');
    const modal = document.querySelector('.modal');
    let btns = document.querySelectorAll(".open-modal");
// 데이터 변경을 위한 각각의 javascript object값을 각 변수에 저장
    const status_name = document.getElementById('status-name');
    const status_nickname = document.getElementById('status-nickname');
    const status_mbti = document.getElementById('status-mbti');
    const strong_point = document.getElementById('strong-point')
    const teaming_method = document.getElementById('teaming-method');
    const tmi_to_line = document.getElementById('tmi-to-line');
    const status_img_url = document.getElementById('status-image');
 </script>

그래서 다음과 같은 코드로 각 데이터가 필요한 HTML 코드에 아이디 값을 주고 각 객체들을 const로 저장해 두고

<script>
[].forEach.call(btns, function (col) {
    col.addEventListener('click', (e) => {
        open_modal(e)
    })
});

function open_modal(e) {
    // 이벤트를 가져와 num 변수에 저장해 어떤 버튼이 눌러졌는지 확인한다.
    // e.target.classList는 내가 지정한 class값인 {openmodal},{num} {블라블라} 가 나옴 
    let num = e.target.classList[1]
    // 각 javascript object를 제어해서 값을 변경한다.
    status_name.innerHTML = team_summary[num].name
    status_nickname.innerHTML = team_summary[num].nick_name
    status_mbti.innerHTML = team_summary[num].mbti
    strong_point.innerHTML = team_summary[num].strong_point
    teaming_method.innerHTML = team_summary[num].teaming_method
    tmi_to_line.innerHTML = team_summary[num].tmi_to_line
    status_img_url.src = team_summary[num].img_url
    // 모달을 화면을 보여준다.

    modal.style.top = ((window.innerHeight - modal.scrollHeight) / 2 + window.scrollY) + "px"
    modal.style.left = ((window.innerHeight - modal.scrollWidth) / 2 + window.scrollX) + "px"
    modal.classList.toggle('show');
    if (modal.classList.contains('show')) {
        body.style.overflow = 'hidden';
    }
}
</script>

다음과 같이 이벤트를 받아 e.target.classList를 호출하면 내가 지정한 class값인 [{openmodal}, {num}, {블라블라}] 가 나오는데 그 중에 내가 필요한 값인 num을 사용해 딕셔너리로 구성된 리스트를 조회해 지정한 아이디로 데이터를 보내준다.

이렇게 각 클래스에 내가 지정한 번호로 재사용이 가능한 모달페이지를 만들 수 있었다.