jquery를 javascript로 바꿔보자 - 클릭 토글 기능

제이쿼리(jquery)로 작성된 코드를 바닐라 자바스크립트(vanilla javascript)로 바꿔보기입니다.

 

바닐라 자바스크립트는 프레임워크 또는 라이브러리가 적용되지 않은 순수 자바스크립트를 말합니다.

 

 

아래처럼 제이쿼리로 작성한 클릭 토글 코드가 있습니다. 해당 예시는 다국어 홈페이지 언어 클릭 시 나라별 메뉴가 보이고, 다시 클릭했을 때 안 보이게 하는 예시입니다.

<script>
$("#language_select").toggle(function(){
	$("#language_wrap").css({"display":"block"}); },
	function(){
		$("#language_wrap").css({"display":"none"});
	}
);
</script>

 

이 코드를 아래처럼 순수 자바스크립트로 바꿔봤습니다. 변수명은 습관이니 이해해 주시기 바랍니다.

코드 안에 주석으로 설명 적어 놨습니다.

<script>
const language_select = document.getElementById('language_select'); // css id 선택자
const language_wrap = document.getElementById('language_wrap');

language_select.addEventListener('click', () => { // 클릭 이벤트 발생 시
  if (language_wrap.style.display === 'none') { // 언어 레이어가 display none 이면
    language_wrap.style.display = 'block'; // 보이게 하고
  } else { // 그게 아니라면(display 상태면)
    language_wrap.style.display = 'none'; // 다시 안보이게 변경
  }
});
</script>

 

사실 코드는 제이쿼리가 짧고 워낙 익숙해진 터라  더 편하지만, 예전처럼 크로스 브라우징 이슈가 적어지고 무겁다는 이유 등으로 지양하는 추세입니다.

몇 개월 전 프로젝트 작업할 때 제이쿼리 사용 안 하고 순수 자바스크립트로 개발했는데 코드는 길어지고, 작업 시간도 조금 더 걸리긴 했지만 크게 무리 없이 마무리했습니다.

아직은 익숙하지 않아 급할 땐 제이쿼리로 작성하는데 조금씩 순수 자바스크립트에 익숙해져야겠습니다.