[TIL] 좋아요 버튼 누르면 버튼 컬러가 변경되는 기능 구현하기

TIL은 "Today I Learned"의 약자입니다. "오늘 내가 배운 것"이라는 뜻입니다. 새롭게 알게 된 흥미로운 사실, 정보, 또는 지식을 잊지 않기 위해 기록으로 남깁니다.  

 

학습 날짜 : 2024년 8월 31일 (토) 

 

 

0. 학습 목표

• 좋아요 버튼을 누르면 버튼 컬러가 변경되는 기능을 구현합니다. 
• Onclick 이벤트와 Toggle 메소드가 작동되는 원리를 이해합니다. 

 

---

1.  문제 의식  

서버에 좋아요 버튼에 대한 데이터를 저장하는 단계는 건너뛰고 단순히 클릭하면 '좋아요 버튼' 컬러가 변경되는 기능을 구현해봤습니다. 저는 클로드와 함께 코드를 짰습니다. 테스트 해보니 잘 작동합니다. 몆줄 안 되는 코드이지만 '좋아요 버튼'은 많은 서비스에서 활용되는 기능인 만큼, 코드가 작동되는 원리가 궁금해졌습니다. 자바스크립트에 대한 이해도가 없어서 클로드의 설명을 온전히 이해하기란 쉽지 않았습니다. 그저 내가 지금 무엇을 모르는지 인지하고 싶었습니다. 

 

---

2. 완성된 모습부터 보자 

 

3. 코드 뜯어 보기 

html 코드 (좋아요 버튼) 

<button class="like-button" onclick="like(this)">
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
		<path d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z" />
	</svg>
</button>

• class="like-button"은 이 버튼에 CSS 스타일을 적용하기 위한 클래스 선택자입니다.
• onclick="like(this)"는 이벤트 핸들러입니다. 버튼 클릭 시 like 함수를 호출하며, this를 인자로 전달합니다. 
  • this는 현재 이벤트가 발생한 요소, 즉 클릭된 버튼 자체를 가리킵니다. 
    • 함수 내에서 this를 사용하면, 브라우저 환경에서는 window 객체(전역 객체)를 가리키게 됩니다. 
  • 만약 this라는 인자 없이 onclick="like()"으로 함수를 호출하게 되면 like() 함수는 여전히 호출되지만, 완성작을 보면 좋아요 버튼이 여러개 있기 때문에 함수는 어떤 버튼이 클릭되었는지에 대한 정보를 받지 못합니다. 

 

onclick="like()"와 같이 this를 명시적으로 전달하지 않고 함수를 호출하면, 함수 내부의 this는 window 객체를 가리키게 됩니다. 이는 대부분의 경우 의도한 동작이 아니며, 특히 특정 HTML 요소의 상태를 변경하려는 경우에는 문제가 됩니다. 이러한 이유로 이벤트 핸들러에서 this를 명시적으로 전달하는 것(onclick="like(this)")이 중요합니다. 이렇게 하면 함수 내부의 this가 클릭된 요소 자체를 가리키게 되어, 원하는 동작을 정확히 수행할 수 있습니다.

 

 

js 함수 코드 (좋아요 버튼 클릭시 호출되는 함수)

function like(button) {
    button.classList.toggle('active');
  }

 

• like는 함수 선언입니다. button 매개변수는 HTML에서 전달된 this를 받습니다.
• classList는 요소의 클래스 목록에 접근하는 속성입니다.
• *toggle 메서드는 클래스의 존재 여부를 확인하고, 없으면 추가하고 있으면 제거합니다.
  • toggle 메서드는 JavaScript의 DOMTokenList 인터페이스에 속한 메서드입니다.
  • 주로 HTML 요소의 클래스를 조작할 때 사용되며, classList 속성을 통해 접근할 수 있습니다.
• 'active' 클래스를 토글하여 버튼의 상태를 변경합니다.

*toggle 메서드에 대해서는 아래에서 자세히 다루겠습니다. 

 

css 코드 (좋아요 버튼 스타일) 

.like-button.active svg path {
    fill: #00d67a;  
}

 

• 이 선택자는 'like-button' 클래스와 'active' 클래스를 모두 가진 요소 내부의 SVG path에 적용됩니다.
• fill 속성은 SVG 요소의 내부 색상을 설정합니다. 여기서는 연한 녹색(#00d67a)으로 설정됩니다.

 

전체 코드 동작 과정

1. 사용자가 버튼을 클릭합니다.
2. onclick 이벤트가 발생하여 like(this) 함수를 호출합니다.
3. JavaScript의 like 함수가 실행되어 버튼의 'active' 클래스를 토글합니다.
4. 클래스 변경으로 인해 CSS 규칙이 적용 또는 해제되어 SVG 하트의 색상이 변경됩니다.

---

4. 더 나아가기 :  toggle 메서드

기능

• 지정된 클래스가 요소에 존재하지 않으면 추가합니다.
• 지정된 클래스가 이미 존재한다면 제거합니다.

 

문법

element.classList.toggle(className);

 

반환값

• 클래스가 추가되면 `true`를 반환합니다.
• 클래스가 제거되면 `false`를 반환합니다.

 

사용 예

let button = document.querySelector('.like-button');
button.classList.toggle('active');

 

장점

• 코드를 간결하게 만듭니다. `if-else` 문을 사용하지 않고도 클래스 존재 여부를 확인하고 추가/제거할 수 있습니다.
• 가독성이 좋습니다. 코드만 봐도 클래스를 '전환'한다는 의도가 명확합니다.

 

실제 동작 (내부적으로 toggle은 다음과 같은 로직을 수행합니다.)

if (element.classList.contains(className)) {
  element.classList.remove(className);
  return false;
} else {
  element.classList.add(className);
  return true;
}

`toggle`을 사용하지 않았다면, 위의 로직을 직접 구현해야 했을 것입니다. `toggle` 메서드는 이 과정을 한 줄의 코드로 간단하게 처리할 수 있게 해줍니다. 좋아요 버튼의 경우, `toggle`을 사용함으로써 버튼의 상태(좋아요 눌림/안눌림)를 쉽게 전환할 수 있습니다. 클래스가 추가되면 활성 상태(예: 색상 변경)가 되고, 제거되면 비활성 상태로 돌아가게 됩니다.