Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

jQuery each() 메서드 완벽 가이드: 작동 원리부터 실전 예제까지

jQuery의 each()는 DOM 요소를 손쉽게 순회(iterate)할 수 있는 간결한 메서드입니다. each()는 대상 jQuery 객체에 직접 호출하도록 설계되었으며, jQuery 객체란 하나 이상의 DOM 요소를 포함하고 jQuery 메서드에 접근할 수 있는 객체를 의미합니다. each()를 사용하면 오류 발생 가능성이 줄어들 뿐만 아니라, 여러 개의 DOM 요소를 한 번에 조작하는 작업도 훨씬 단순해집니다.

each()를 사용하려면 콜백 함수(callback function)가 필요합니다. 콜백 함수란 다른 함수에 인수로 전달되어 나중에 실행되는 함수를 말합니다. 콜백 함수 내부에서는 현재 요소의 인덱스 번호와 요소 자체에 모두 접근할 수 있습니다.

each()의 적용 방식은 일반적인 JavaScript 반복문만큼 직관적이지만, 초보자가 헷갈리기 쉬운 부분도 몇 가지 있습니다. 이 글에서는 그런 혼동 포인트를 짚어보고 문법을 자세히 살펴본 뒤, 마지막에는 단계별 코드 예제를 통해 jQuery each()의 다양한 활용법을 확인해 보겠습니다.

jQuery each()란 무엇인가?

jQuery each는 jQuery 라이브러리에서 제공하는 반복(loop) 메서드입니다. JavaScript의 반복문처럼 동작하며 DOM 요소들을 하나씩 순회합니다. each()는 콜백 함수를 인수로 받으며, 실제 DOM 요소 조작은 바로 이 콜백 함수 내부에서 이루어집니다.

콜백 함수 본문 안에서는 조건문(conditional statement)을 활용해 선택된 요소 중 일부만 변경할 수도 있습니다. JavaScript에서 조건문이란 if…then 형태의 문장을 의미하는데, 이를 활용하면 어떤 요소를 어떻게 변경할지 훨씬 세밀하게 제어할 수 있습니다.

jQuery each() 문법

jQuery each는 크게 두 가지 방식으로 호출할 수 있습니다. 첫 번째는 선택된 요소에 대한 메서드로 호출하는 방식입니다. 이때 콜백 함수는 최대 두 개의 선택적 인수를 받습니다: index와 value입니다.

  • index: 현재 요소의 인덱스 번호입니다. 목록의 첫 번째 요소라면 0이 반환됩니다.
  • value: 현재 순회 중인 요소 자체를 참조합니다.

주의할 점은, value에 jQuery 메서드를 체이닝(chaining)하려면 반드시 value를 jQuery 셀렉터로 감싸야 한다는 것입니다. 문법을 파악하기 위해 추상적인 코드 예제를 살펴보겠습니다.

$('div').each((index, value) => {
  console.log(`${index}: ${$(value).text()}`)
})

위 코드는 페이지의 모든 <div>를 선택해 순회하면서, 매 반복마다 현재 요소의 인덱스 위치와 값을 사용할 수 있게 해줍니다. 만약 value를 그대로 출력하면 익숙한 [object Object]라는 값이 반환됩니다.

[object Object]는 객체의 문자열 표현일 뿐입니다. 따라서 원하는 실제 값을 얻으려면 별도의 메서드를 호출해야 합니다. 위 예제에서는 text() 메서드를 사용해 객체의 텍스트 속성을 추출했습니다. 정확히 무엇이 반환되는지 더 깊이 이해하려면 [object Object]에 대한 별도 학습을 권장합니다.

위 예제는 각 <div>의 인덱스 번호와 텍스트 속성을 차례로 로그에 기록합니다. 만약 인덱스가 필요 없다면 코드를 아래와 같이 리팩토링할 수 있습니다.

$('div').each(function() {
  alert($(this).text())
})

이렇게 작성해도 현재 <div> 요소의 텍스트가 동일하게 출력됩니다. 이 콜백 함수의 스코프 안에서 this 키워드는 앞서 value 변수가 가리키던 요소를 참조합니다. 단, 화살표 함수(arrow function) 안에서는 this 키워드에 접근할 수 없다는 점에 유의하세요.

화살표 함수는 함수를 간결하게 작성할 수 있는 좋은 대안이지만, this에 바인딩되지 않습니다. 즉, 화살표 함수 안에서 this를 사용하면 일반 함수 표기법(functional notation)으로 작성했을 때 반환되는 객체와 다른 객체가 반환됩니다. 화살표 함수에 대해 더 알고 싶다면 관련 가이드를 참고하세요.

jQuery each() 실전 예제

이제 앞서 살펴본 문법 예제를 확장해 몇 가지 속성을 추가해 보겠습니다. 먼저 다양한 클래스에 속한 색상 목록을 담은 기본 HTML 마크업부터 시작합니다.

<div class="colorSelect">Red</div>
<div>Pink</div>
<div class="color">Orange</div>
<div class="colorSelect">Purple</div>
<div class="colorSelect">Blue</div>

이 코드는 각 텍스트 요소를 DOM에 렌더링합니다. 먼저 화살표 함수와 일반 함수 두 가지 방식으로 콘솔에 텍스트를 출력해 보겠습니다.

$('.colorSelect').each((index, value) => {
  console.log($(value).text())
})

클래스명이 colorSelect인 <div>만 선택했기 때문에 Red, Purple, Blue가 로그에 기록됩니다. 여기서 value를 새로운 jQuery 인스턴스로 감싸 text() 메서드를 호출했다는 점에 주목하세요. 이렇게 하면 선택된 <div> 요소들의 텍스트만 깔끔하게 반환됩니다.

이번에는 같은 결과를 this 키워드를 사용해 얻어 보겠습니다.

$('.colorSelect').each(function() {
   console.log($(this).text())
})

여기서는 이름 없는 함수, 즉 익명 함수(anonymous function)를 콜백으로 사용했습니다. 역시 Red, Purple, Blue가 동일하게 출력됩니다. 참고로 화살표 함수도 jQuery에서 어느 정도 동작하기는 하지만, jQuery 콜백에는 일반 함수 표기법을 사용하는 것이 모범 사례(best practice)입니다.

이제 요소 컬렉션을 순회하는 방법을 익혔으니, 재미있는 실습으로 넘어가 텍스트 색상을 변경해 보겠습니다.

<div class="colorSelect">Red</div>
<div>Pink</div>
<div class="color">Orange</div>
<div class="colorSelect">Purple</div>
<div class="colorSelect">Blue</div>

<div class='result'>

</div>

<style>
  .colorSelect {
    color: blue;
  }
  
  .green {
    color: green;
  }
</style>

색상 목록 페이지에 <style> 요소로 몇 가지 클래스를 추가했습니다. 이 예제에서는 colorSelect 클래스를 가진 <div>들에 파란색을 지정했습니다. 여기에 조건문을 활용해, 선택된 세 요소 중 두 개만 초록색으로 변경하는 코드를 작성해 보겠습니다.

$('.colorSelect').each(function() {
  if ($(this).text() !== "Purple") {
    $(this).toggleClass('green')
  }
})

먼저 클래스 셀렉터와 일치하는 <div>들에 each()를 호출했습니다. 그다음 조건문으로 각 선택된 요소의 텍스트 속성이 "Purple"인지 검사했습니다. 조건문 본문 안에는 또 하나의 this 인스턴스가 등장합니다.

조건문 본문의 this가 참조하는 것은 해당 조건을 충족하는 텍스트 속성들입니다. 출력 결과를 보면, 조건문 본문의 this가 "Red"와 "Blue" 텍스트 속성을 가리켰음을 알 수 있습니다.

"Red"와 "Blue"는 "Purple"과 같지 않기 때문에, jQuery의 toggleClass() 메서드를 사용해 기존 클래스를 green 클래스로 변경했습니다. jQuery toggleClass()에 대해 더 자세히 알고 싶다면 관련 아티클을 읽어보시길 권합니다.

마무리

이 가이드에서 많은 내용을 다뤘습니다. 먼저 jQuery each()가 jQuery 객체를 대상으로 한다는 점을 제외하면 다른 JavaScript 반복자(iterator)와 매우 유사하게 동작한다는 것을 배웠습니다. 이어서 문법 모범 사례와 함께, 화살표 함수와 일반 함수 표기법 사이에서 발생할 수 있는 잠재적 문제점도 살펴보았습니다.

예제를 통해 화살표 함수가 유용하지만 제약이 있다는 것도 확인했습니다. 골치 아픈 버그를 피하려면 모든 jQuery 콜백에 일반 함수 표기법을 사용하는 것을 잊지 마세요.

마지막으로 each() 루프 본문 안에서 조건문을 활용해, 조건을 충족하는 요소만 선별적으로 변경하는 방법도 실습했습니다.

이제 여러분이 직접 새롭게 익힌 jQuery 반복 패턴을 연습할 차례입니다. 작은 예제부터 시작해서 jQuery each()가 할 수 있는 모든 것을 탐험해 보세요.