[JavaScript] 아코디언 객체 만들기

은지·2024년 1월 17일

JavaScript

슥 삭 슥 삭

목록 보기

2/8

for 문을 사용한 방법

forEach를 사용한 방법

이벤트 위임 (Event Delegation) 을 통해 전체 적용한 방법

오늘은 많은 곳에서 활용되는 아코디언 객체를 여러 방법으로 만들어보자.

아코디언 객체는 하나의 객체를 클릭했을 때 나머지 객체들에게 적용되어 있는 효과를 모두 제거하고 클릭한 객체에 대해서만 효과를 적용해주는 것이다.

구조는 완전 간단하게 아래 형태로 스크립트를 작성해보자~~

<body>

    <i id="first-favorites-icon" class="favorites-icon"></i>
    <i id="second-favorites-icon" class="favorites-icon"></i>
    <i id="third-favorites-icon" class="favorites-icon"></i>
    
</body>

body {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 150px;
}
.favorites-icon {
    display: block;
    width: 150px;
    height: 150px;
    background-color: #ccc;
    margin-right: 30px;
}

.on {
    background-color: orange;
}

^ 적용된 html, css

1. for문으로 작성하기

const favIcons = document.querySelectorAll('.favorites-icon');

function handleClick (event){
    for (let i = 0; i < favIcons.length; i++){
        if(favIcons[i] != this){
            favIcons[i].classList.remove('on')
        }
    }
    this.classList.toggle('on');
}

for (let i = 0; i < favIcons.length; i++){
    favIcons[i].addEventListener('click', handleClick)
}

// 1. 클래스 선택자로 전체 객체 선택
// 2. 클릭 이벤트 핸들러를 만든 후 모든 객체에 적용 될 수 있도록 for문 작성
// 3. 클릭한 객체가 현재 클릭한 객체가 아닐 때 클래스 on 제거
// 4. 클릭한 객체에는 클래스 추가 (  add 대신 toggle로 작성해둔 상태 )

구조에 따라 더 복잡해지고 달라지지만 기본적인 형태는 이렇게 만들어 볼 수 있다.
그리고 for문 대신 forEach를 사용해서 간단하고 가독성이 높은 코드로 변경할 수 있다.

2. forEach로 작성하기

const favIcons = document.querySelectorAll('.favorites-icon');

function handleClick(event) {
    favIcons.forEach(icon => {
        icon.classList.remove('on');
    });

    this.classList.toggle('on');
}

favIcons.forEach(icon => {
    icon.addEventListener('click', handleClick);
});

// 1. 클래스 선택자로 전체 객체 선택
// 2. 클릭 이벤트 핸들러를 만든 후 forEach로 모든 객체에 on 클래스를 제거
// 3. this로 현재 선택한 객체에만 on 클래스 추가
// 4. 모든 객체에 이벤트 핸들러가 적용되게 클릭 이벤트 지정

대부분의 아코디언에는 해당 형태로 작업해왔는데 이벤트 위임으로 자식 요소에 대한 이벤트 핸들러를 만들수 도 있다!

3. 이벤트 위임으로 이벤트 적용시키기

이벤트 위임으로 부모 요소에 이벤트 리스너를 적용시키면 하위 자식 객체가 있는지 여부를 파악한 하고 작업을 수행한다.

const favoriteContainer = document.getElementById('favorites-container');

favoriteContainer.addEventListener('click', function (event) {
	const targetIcon = event.target;
  
  	if (targetIcon.classList.contains('favorite-icon')) {
    	const favIcons = document.querySelectorAll('.favorite-icon');
      
        favIcons.forEach(icon => {
          	icon.classList.remove('on');
        });
        targetIcon.classList.toggle('on');
    }
})
// 1. 이벤트를 적용시킬 객체 선택 (부모 요소)
// 2. 클릭이벤트 적용
// 3. 부모 요소 하위에 자식 요소가 있는지 조건문을 통해 확인
// 4. 자식요소 모두 선택
// 5. forEach를 사용하여 선택된 객체에 모든 on 클래스를 제거해주고 현재 선택한 객체에만 on 클래스 토글 적용