Javascript - Modal

긴 코드 함수(function)로 축약하기

자바스크립트를 사용할때 종종 태그에 직접 사용할때가 있다.

1. 버튼 작동하기

//modal
<div id="modal">
  
  modal content
  
  <button onclick="document.getElementById('modal').style.display='none';"
	>닫기</button>
  </div>

<button
onclick="document.getElementById('modal').style.display='block';"
>modal</button>

• onclick : 클릭시 이벤트 발생

• document.getElementById('modal') : document내에 modal이라는 id를 찾아서

• style.display : display style(css)를 변경한다.

  • display : none; 보이지 않게 한다.
  • display : block; block요소로 변경

code수정

//modal
<div id="modal">
  
  modal content
  
  <button onclick="closeModal()"
	>닫기</button>
  </div>

<button
onclick="openModal()"
>modal</button>


<script> 
  
  // 각각의 함수만들기
  function openModal(){
  	document.getElementById('modal').style.display='block';
  }

  function closeModal(){
    document.getElementById('modal').style.display='none';
  }

  // 파라미터를 이용하여 여러개의 함수를 하나로 만들기
  function modalHandler(a){
    document.getElementById('modal').style.display=a;
  }
	modalHandler('block'); //modal열기버튼 => display='block';
    modalHandler('none'); //닫기버튼 => display='none';


  </script>

• 각각의 버튼에 적용할 함수를 만들어서 사용할수 있지만 같은 실행함수를 2개를 만들 필요는 없다.
• 하나의 함수에 파라미터를 이용하여 각 버튼에 들어가는 값을 따로 지정한다.

적용 코드

• 함수로 만들어서 사용하게 되면 재사용이 가능하다.
• 한눈에 보기 좋게 가독성 또한 좋다.
• 파라미터로 하나의 함수를 이용하여 같은 기능의 함수를 적용할수있다.

✏️ React로 계속 작업하다 보니 basic을 놓치는 기분이다.
다시 작은것들을 하나하나 만들어보면 복습을 해보았다.