[Javascript] 확장성있게 모달창 띄우기

겉보기엔 그냥 제목 클릭하면 밑에 내용 보여주는 모달창같지만 코드를 보면 확장성이 있는 것을 알 수 있다.

 

HTML

  <div class="section">

    <ul class="column">

      <li class="content-box">

        <h1 class="title"></h1>

      </li>

      <li class="content-box">

        <h1 class="title"></h1>

      </li>

      <li class="content-box">

        <h1 class="title"></h1>

      </li>

    </ul>

    <div class="modal">

      <h1 class="title"></h1>

      <p class="content"></p>

    </div>

  </div>

신기하다. h1태그나 content태그를 보면 싹 다 비워져있는데 저렇게 내용이 들어가있다.

 

CSS

.column{

  padding: 0 120px;

}

.content-box{

  border-bottom: 4px solid black;

  padding: 40px;

  cursor: pointer;

}

.column .content-box:last-child{

  border-bottom: none;

}

.modal{

  margin-top: 100px;

  width: 100%;

  height: 400px;

  background: #999;

  padding: 100px;

}

.modal .title{

  font-size: 60px;

}

.modal .content{

  font-size: 40px;

  margin-top: 60px;

}

css를 뒤져봐도 내용에 관한 것은 보이지 않는다. 그저 리스트와 모달창 디자인뿐이다.

 

JAVASCRIPT

const data = [

  {title : '안녕하세요',

  content : '만나서 반갑다라는 뜻'},

  {title : '안녕히 계세요',

  content : '잘 있으라는 뜻'},

  {title : '감사합니다',

  content : '고맙다는 뜻'}

];

data.forEach(function(a, i){

  document.querySelectorAll('.title')[i].innerHTML = a.title;

  document.querySelectorAll('.content-box')[i].addEventListener('click', function(){

    document.querySelector('.modal .title').innerHTML = a.title;

    document.querySelector('.modal .content').innerHTML = a.content;

  })

});

이렇게 짧은 코드들이 저 내용들을 다 대신해주고 모달창까지 띄어주고 있다.

 

우선 지금은 서버가 없기 때문에 data라는 object와 array자료를 활용했지만, 서버에서 데이터를 가져온다는 가정하에 만들어본 것이다.

그래서 data에 for반복문을 사용해서 리스트의 title에 내용을 넣어주고 또한 각 리스트를 클릭했을 때 모달창의 title과 content에 클릭한 리스트에 내용에 맞게 띄어주도록 코드를 작성했다.

 

우선 forEach부터 설명하자면 forEach는 array자료에서 사용할 수 있는 for반복문이다. 원래 for반복문 사용할 때 뭐 let i = 0~~ 이런식으로 길게 작성하고 시작해야했지만 array자료.forEach를 해준다면 array자료안에 있는 자료의 갯수만큼만 알아서 실행이 된다.

function안에 파라미터가 a와 i가 있는데 a의 의미는 array자료의 실제 데이터를 의미한다. 그리고 i는 0,1,2... index값을 의미한다. 자료의 갯수만큼 0부터 숫자가 1씩 올라간다. 그렇기 때문에 a.title이라고 작성한 것은 array자료안에 title이라는 key값을 가진 것들을 모두 불러오는 것이다. a.title말고 data[i].title 이라고 해도 똑같은 의미다.

 

이렇게 확장성있게 코드를 짠다면 데이터에 따라 따로 코드를 수정해주지 않아도 알아서 내용이 바뀔 수 있기 때문에 훨씬 편리할 것이다.