웹사이트를 방문했을 때 우리가 가장 많이 하는 동작은 무엇일까요? 바로 마우스 클릭입니다. 클릭은 웹사이트나 앱에서 가장 핵심적인 상호작용 중 하나로, 페이지를 탐색하거나 장바구니에 상품을 담는 등 거의 모든 행위의 출발점이 됩니다.
그렇다면 사용자가 페이지의 특정 요소를 클릭하는 순간을 감지할 수 있다면 얼마나 좋을까요? 클릭이라는 행동을 기반으로 훨씬 더 풍부한 사용자 경험을 설계할 수 있을 것입니다.
바로 이럴 때 jQuery의 click() 메서드가 빛을 발합니다. 단 몇 줄의 코드만으로 마우스 클릭 이벤트를 감지하고 원하는 동작을 실행할 수 있습니다. 이 메서드는 jQuery 셀렉터에 호출되며, 콜백 함수를 인자로 받습니다. click() 메서드가 클릭 이벤트를 감지할 때마다 전달된 콜백 함수가 자동으로 실행됩니다.
jQuery click() 기본 사용법
아래 예제에서는 HTML 버튼을 화면에 렌더링하고, 버튼이 클릭되었을 때 페이지에 새로운 텍스트를 추가해 보겠습니다. click() 메서드는 페이지의 모든 요소에 연결할 수 있지만, 일반적으로 버튼에 적용하는 경우가 가장 많습니다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <div id="main"> <button id="btn-primary"> Click Me! </button> <p class="new-content"> </p> </div>
위 코드는 id가 "main"인 <div> 안에 id가 "btn-primary"인 기본적인 버튼을 렌더링합니다. 이 예제의 목표는 버튼을 클릭한 후 class가 "new-content"인 <p> 태그 안에 새로운 내용을 표시하는 것입니다.
이제 jQuery 코드를 <script> 태그로 감싸면 다음과 같습니다.
<script>
$('#btn-primary').click(() => {
$('.new-content').html("Button Clicked!")
})
</script>
여기서는 버튼의 id에 click() 메서드를 연결하고, 콜백 함수를 인자로 전달했습니다. 이 콜백 함수는 이름 없는 익명 함수(anonymous function)로, <p> 태그 내부의 HTML을 "Button Clicked!"라는 문자열로 대체합니다. 코드의 실행 결과를 살펴보기 전에, 익명 함수가 무엇인지 간단히 짚고 넘어가겠습니다.
익명 함수란?
익명 함수란 말 그대로 이름이 없는 함수를 의미합니다. 익명 함수는 주로 다른 메서드의 인자로 전달되는 콜백 형태로 사용됩니다. 콜백 함수와 익명 함수는 반응형 웹사이트와 앱을 만드는 데 필수적인 핵심 요소입니다.
참고로, 부트캠프 참가자의 81%가 수료 후 기술 직군 취업 전망에 대한 자신감이 높아졌다고 응답했으며, 평균적으로 부트캠프 수료생은 시작부터 첫 취업까지 6개월 이내에 커리어 전환을 완료했습니다.
실행 결과 확인하기
JavaScript 기본 개념을 복습했으니, 이제 위 코드가 실제로 어떻게 동작하는지 살펴보겠습니다. 먼저 "main" <div> 안의 버튼은 다음과 같이 표시됩니다.
버튼 셀렉터에 click() 메서드를 연결했기 때문에, 사용자가 버튼을 클릭하는 순간 이벤트 핸들러가 콜백 함수를 호출합니다. 그 결과 버튼 아래에 "Button Clicked!"라는 문자열이 표시됩니다.
여기서 눈여겨볼 점은 jQuery의 html() 메서드를 사용했기 때문에 내용이 한 번만 렌더링된다는 것입니다. 버튼을 몇 번을 클릭하더라도 <p> 요소에는 하나의 인스턴스만 유지됩니다. 만약 버튼을 클릭할 때마다 문자열을 계속 추가하고 싶다면, html() 대신 append()를 사용하면 됩니다.
<script>
$('#btn-primary').click(() => {
$('.new-content').append("Button Clicked!")
})
</script>
append()로 변경한 후 버튼을 세 번 클릭하면, "new-content" <p> 태그에 문자열이 세 번 추가된 것을 확인할 수 있습니다.
이것이 바로 버튼을 클릭할 때마다 콜백 함수가 호출되는 예시입니다. 코딩 여정을 계속해 나가다 보면 jQuery의 click() 메서드가 매력적인 사용자 경험을 구축하는 데 얼마나 중요한 역할을 하는지 깨닫게 될 것입니다.
마무리
이번 글에서는 jQuery의 click() 메서드가 무엇인지, 어떤 역할을 하는지, 그리고 어디에 활용되는지 살펴보았습니다. 버튼에 click()을 연결하여 클릭 시 새로운 내용을 한 번만 표시하거나, 클릭 횟수만큼 반복해서 표시하는 예제도 함께 확인했습니다.
jQuery의 click() 메서드는 단 몇 줄의 코드만으로 웹페이지나 앱에 강력한 기능을 추가할 수 있는 효율적인 도구입니다. 버튼 외에도 다른 요소에 click()을 연결해 보며 직접 실험해 보세요. 생각보다 다양하게 활용할 수 있습니다!