$() 직접 호출 방식이 왜 문제인가?

jQuery에서 $(...) 직접 호출이 가져오는 문제들

 

jQuery를 사용하다 보면 습관처럼 $()를 바로 호출해버리는 경우가 많다.

하지만 이 방식이 코드 곳곳에 무분별하게 퍼지게 되면 다음과 같은 문제가 생긴다.

 

1. 불필요한 DOM 탐색 증가

• $('.box') 같은 선택자가 여러 번 등장하면 매번 DOM을 새로 탐색한다. 퍼포먼스 저하로 이어질 수 있다.

2. 이벤트 중복 바인딩 위험

• 같은 요소에 중복으로 .on()이 걸리는 경우가 자주 발생한다.

$('.btn').on('click', function() {
  alert('clicked!');
});

예를들어 이렇게 하면 .btn을 클릭할 때마다 실행되는 코드를 지정한다.

 

그런데 같은 요소에 이 코드를 여러번 실행하면 클릭할 때마다 여러 번 실행된다.

$('.btn').on('click', function() {
  console.log('클릭됨');
});

$('.btn').on('click', function() {
  console.log('또 클릭됨');
});

버튼을 한 번 클릭하면 콘솔에 클릭됨, 또 클릭됨이 모두 출력된다.

이런 상황을 "이벤트 중복 바인딩" 이라고 한다.

 

 

3. 유지보수 어려움

• 어디서 어떤 동작이 실행되는지 파악하기 어려워진다.

 

$(function() {
  $('.btn').on('click', function() {
    $('.box').toggleClass('active');
  });

  $('.tab').on('click', function() {
    $('.tab-content').hide();
  });
});

 

예를들어 위와 같은 코드가 전역 곳곳에 퍼져있고, 각 기능이 서로영향을 줄 수 있는 구조라면 다음 문제가 발생할 수 있다.

• 여러 개발자가 같은 선택자에 대해 중복으로 이벤트 바인딩할 수 있다.
• 같은 이름의 변수나 함수가 추돌 가능
• 페이지 내 DOM이 변경될 때 불필요한 탐색 발생
• 유지보수 시 어느 코드가 어떤 기능을 담당하는지 파악 어려움

 

💡  해결책은 ?

• 네임스페이스와 모듈화로 기능을 분리하고, DOM 탐색은 최소화해야 한다. -> 자세한 내용은 다음 포스팅에서