jQuery의 addClass() 메서드는 개발자가 요소를 더욱 유연하게 다룰 수 있게 해주는 강력한 도구입니다. 메서드 이름 그대로, 선택한 요소에 class 속성을 추가할 수 있습니다. 그렇다면 이 기능은 왜 필요할까요?
웹 페이지에 제목, 문단, 클릭 시 특정 동작을 수행하는 버튼 같은 기존 요소들이 있다고 가정해 보겠습니다. 이 페이지에는 각 요소의 클래스 이름을 기반으로 스타일을 적용하는 스타일시트도 함께 존재합니다. 버튼을 클릭하면 기존 콘텐츠의 스타일, 즉 외관이 바뀌도록 만들 수 있는 것입니다.
addClass() 메서드를 사용하면 버튼이 클릭된 후 기존 콘텐츠에 새로운 스타일 속성을 삽입할 수 있어, 단 한 줄의 코드로 기존 콘텐츠의 스타일을 변경하는 것이 가능합니다. 이를 통해 개발자는 스타일 중심으로 요소를 조작하는 사고방식을 자연스럽게 익힐 수 있습니다.
이제 예제를 좀 더 깊이 들여다보며, 실제로 어떻게 코드를 작성하는지 알아보겠습니다.
jQuery addClass()의 작동 원리
이 예제에서는 버튼을 클릭했을 때 객체의 class 속성을 변경합니다. 예제 코드를 살펴보기 전에 addClass()가 어떻게 작동하는지 먼저 확인해 보겠습니다. 다음과 같은 HTML이 있다고 가정해 봅시다:
<head>
<meta charset="utf-8">
<title>addClass demo</title>
<style>
p {
margin: 8px;
font-size: 16px;
}
.selected {
color: blue;
}
.highlight {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
<head> 안에서는 <style> 태그를 사용해 <p> 태그에 대한 기본적인 스타일을 정의했습니다. jQuery API 링크도 함께 포함되어 있습니다. <body>에는 "Hello", "and", "Goodbye"라는 문구가 세 개의 <p> 태그로 각각 감싸져 있습니다. addClass()의 작동 방식을 확인하기 위해 다시 <style> 부분을 살펴보겠습니다.
<style> 안에는 두 개의 클래스가 정의되어 있습니다. 하나는 "selected"로, 글자 색상을 파란색으로 지정합니다. 다른 하나는 "highlight"로, 배경색을 노란색으로 지정합니다. 현재 상태에서는 어떤 스타일도 적용되지 않은 것을 확인할 수 있습니다:
스타일이 적용되지 않는 이유는 <p> 태그에 연결된 클래스가 없기 때문입니다. HTML을 직접 수정해 <p> 태그에 일일이 클래스를 작성하는 대신, addClass()를 사용하면 원하는 <p> 요소에 클래스 속성을 손쉽게 추가할 수 있습니다.
<script>
$(document).ready(() => {
$('p').addClass('selected')
})
</script>
여기서는 모든 <p> 요소를 선택한 뒤 'selected'라는 class 속성을 추가했습니다. 이제 모든 <p> 요소가 파란색으로 표시될 것으로 기대할 수 있습니다.
정확히 예상대로 결과가 나왔습니다! 재미있는 점은, jQuery의 addClass() 메서드는 여러 개의 클래스를 하나의 인수로 받을 수도 있다는 것입니다. 예를 들면 다음과 같습니다:
<script>
$(document).ready(() => {
$('p').addClass('selected highlight')
})
</script>
두 클래스를 한 세트의 괄호 안에 함께 넣는 문법에 주목하세요. 이렇게 작성하면 <p> 요소가 파란색 글씨와 노란색 배경으로 동시에 표시됩니다.
addClass()가 요소에 class 속성을 추가하는 기본 원리를 확인했으니, 이제 버튼이 포함된 처음 예제로 돌아가 보겠습니다.
jQuery addClass() 실전 활용하기
첫 번째 예제에 버튼을 추가한 코드입니다:
<head>
<meta charset="utf-8">
<title>addClass demo</title>
<style>
p {
margin: 8px;
font-size: 16px;
}
.selected {
color: blue;
}
.highlight {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<p>
<strong>jQuery addClass Example</strong>
</p>
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
<button>
Click to add class
</button>
위 코드는 버튼을 화면에 렌더링하지만, 아직 아무 동작도 하지 않습니다. 앞선 예제에서는 모든 <p> 태그를 한꺼번에 변경했습니다. 이번에는 버튼을 클릭했을 때 특정 요소 하나만 변경해 보겠습니다. 이때 jQuery의 click() 메서드를 활용할 수 있습니다.
click() 메서드를 간단히 복습하자면, 이벤트 리스너를 연결하고 싶은 객체 선택자에 호출한 뒤, 인수로 콜백 함수를 전달하는 방식으로 사용합니다. 콜백 함수란 나중에 실행하기 위해 인수로 전달하는 함수를 의미한다는 점을 기억하세요. 이 예제에서는 버튼이 클릭되는 순간 콜백 함수가 실행됩니다.
실제 동작을 확인해 보겠습니다!
<script>
$('button').click(() => {
$('p').last().addClass('selected')
})
</script>
콜백 함수 안에서는 <p> 요소들을 선택한 후 last() 메서드를 호출해 마지막 <p> 요소를 찾습니다. 그런 다음 해당 요소에 'selected' 클래스 속성을 추가합니다. 따라서 "Goodbye"라는 단어가 있는 마지막 <p> 요소가 버튼을 클릭하면 파란색으로 변할 것으로 예상됩니다.
버튼을 클릭해 직접 확인해 보겠습니다.
정확히 예상한 대로 나타났습니다! 지금까지 jQuery의 addClass()를 활용해 페이지가 로드되는 즉시 모든 <p> 요소의 클래스를 변경하는 일반적인 사용법을 살펴보았습니다. 또한 click() 같은 다른 jQuery 메서드와 조합해, 버튼 클릭 시 특정 <p> 요소 하나만 선택적으로 변경하는 방법도 확인했습니다.
마무리
오늘은 jQuery의 addClass()가 무엇인지, 그리고 어떻게 작동하는지 배웠습니다. 또한 addClass()는 적용 범위 면에서 매우 유연하여 여러 클래스 속성을 한 번에 변경할 수 있다는 점도 알게 되었습니다. 위의 예제들은 jQuery addClass()의 다양한 활용 가능성을 보여주는 기본적인 예시에 불과합니다. 더 발전시키고 싶다면 직접 실험해 보면서 자신의 웹 애플리케이션에서 addClass()를 유용하게 활용할 방법을 찾아보세요.