Accordion Control

Accordion menu를 컨트롤 하는 인터랙션(Interaction)을 구현합니다.

목적

.AccordionItem에 .AccordionItem--open 상태 클래스를 추가/제거해서 .AccordionHead를 클릭했을 때 .AccordionBody가 open/close되는 인터랙션을 구현한다.

<div class="AccordionItem">
<!-- AccordionItem--open 본문 펼침 상태 클래스 -->
  <dt class="AccordionHead">넷플릭스란 무엇인가요? <button type="button" class="resetButton AccordionButton"><img src="./assets/plusIcon.svg" alt="펼침" width="24" height="24" /></button></dt>
  <dd class="AccordionBody">
    <p>넷플릭스는 각종 수상 경력에 빛나는 TV 프로그램, 영화, 애니메이션, 다큐멘터리 등 다양한 콘텐츠를 인터넷 연결이 가능한 수천 종의 디바이스에서 시청할 수 있는 스트리밍
      서비스입니다.</p>
    <p>저렴한 월 요금으로 일체의 광고 없이 원하는 시간에 원하는 만큼 즐길 수 있습니다. 무궁무진한 콘텐츠가 준비되어 있으며 매주 새로운 TV 프로그램과 영화가 제공됩니다.</p>
  </dd>
</div>

Accordion Control 예시

설계

변수 설정

const ACCORDION_ITEM_ACTIVE_CLASS = 'AccordionItem--open'
const accordionNode = document.querySelector('.Accordion')
const accordionItemNodeList = accordionNode.querySelectorAll('.AccordionItem')

사용된 기능

• Array.from()

• Element.closest()

• classList.toggle()

• Array.prototype.forEach()

방법

• .AccordionItem에 'click' 이벤트를 적용한다.

• 'click' 했을 때, classList.contains() 메서드를 사용해서 .AccordionItem--open가 존재하는지 확인한다.

• 클릭 할 때마다 open/close를 반복해야 하기 때문에 open 상태 클래스가 존재 하지 않는다면 classList.add()를 사용해서 추가, 존재한다면 classList.remove() 메서드를 사용해서 제거한다.

처음에 작성한 코드

const handleToggleAccordionBody = function (e) {
  const accordionItemNode = accordionNode.querySelector('.AccordionItem')
  if (!accordionItemNode.classList.contains(ACCORDION_ITEM_ACTIVE_CLASS)) {
    accordionItemNode.classList.add(ACCORDION_ITEM_ACTIVE_CLASS)
  } else {
    accordionItemNode.classList.remove(ACCORDION_ITEM_ACTIVE_CLASS)
  }
}

for (var i = 0; i < accordionItemNodeList.length; i++) {
  accordionItemNodeList[i].addEventListener('click', handleToggleAccordionBody)
}

문제점 발견

const handleToggleAccordionBody = function (e) {
  const accordionItemNode = accordionNode.querySelector('.AccordionItem')
}

• 문제 : 어떤 Item을 클릭해도 첫 번째 Item만 동작이 되었다.

  • 원인 : 첫 번째 .AccordionItem만 찾아왔기 때문이다.

• 문제 : e.target을 사용해서 이벤트가 걸린 요소를 확인 하지 않았다. 그러다 보니 계속 밖에서만 .AccordionItem 요소에 접근하려고 하고 안에서 접근할 생각을 하지 못했다.

  • 원인 : .AccordionItem에 이벤트를 걸었기 때문에 e.target이 당연히 .AccordionItem라고 생각했다. handleToggleAccordionBody의 e.target은 .AccordionButton이다.

handleToggleAccordionBody의 e.target

개선 (1)

Node.parentNode 사용하기

.AccordionButton은 .AccordionItem의 자식요소입니다. 자식요소에서 부모요소에 접근하는 Node.parentNode을 사용하여 클릭한 요소의 부모요소에 접근합니다.

const handleToggleAccordionBody = function (e) {
  const accordionItemNode = e.target.parentNode.parentNode
}

handleToggleAccordionBody의 e.target.parentNode.parentNode

Node.parentNod는 인접한 부모요소를 찾기 때문에 부모의 부모를 찾으려면 .parentNode.parentNode으로 작성한다.

개선 (2)

Element.closest() 사용하기

Node.parentNode 보다 더 개선된 메서드 사용합니다. Element.closest()은 선택한 요소에서 인접한 부모요소부터 클래스 이름이 일치하는 부모요소를 찾는다.

const handleToggleAccordionBody = function (e) {
  const accordionItemNode = e.target.closest('.AccordionItem')
}

개선 (3)

forEach 사용하기

for문 대신 유사배열인 .AccordionItem을 배열화하여 forEach() 메서드를 사용합니다.

const accordionItemNodeList = accordionNode.querySelectorAll('.AccordionItem')
const accordionArr = Array.from(accordionItemNodeList)

accordionArr.forEach(function (item) {
  item.addEventListener('click', handleToggleAccordionBody)
})

개선 (4)

add()/ remove() 메서드 대신 classList.toggle() 메서드를 사용합니다. classList.toggle()는 인자에 전달된 클래스 이름의 유무를 확인하고 만약 있다면 선택된 요소에 제거하고 없다면 제거하는 기능을 하는 메서드입니다. 즉, toggle() 메서드는 contains(), add(), remove() 메서드의 기능을 한 번에 수행합니다.

const handleToggleAccordionBody = function (e) {
  const accordionItemNode = e.target.closest('.AccordionItem')
  accordionItemNode.classList.toggle(ACCORDION_ITEM_ACTIVE_CLASS)
}

개선 (5)

Element.closest()에서 null이 반환되는 경우 오류를 방지하기

Element.closest()

closest() 메서드는 element node에 사용이 가능한 메서드입니다. 메서드에 전달된 클래스 이름과 일치하는 가장 가까운 부모가 있을 때 부모 노드를 반환하는 메서드 입니다. 단, 일치하는 부모노드가 없을 경우 null을 반환합니다.

null을 반환하기 때문에 조건문에서 사용이 가능합니다. null = false, 일치하는 노드가 있을 경우 = true 를 반환합니다.

null이 반환 됐을 때 오류 발생

논리 연산자를 사용하기

const handleToggleAccordionBody = function (e) {
  const accordionItemNode = e.target.closest('.AccordionIte')
  
  /* 방법 1 */
  /* accordionItemNode이 null이라면 */
  accordionItemNode && 
    accordionItemNode.classList.toggle(ACCORDION_ITEM_ACTIVE_CLASS)
  
  /* 방법 2 */
  /* accordionItemNode이 null이 아니라면 */
  accordionItem !== null &&
    accordionItem.classList.toggle(ACCORDION_ITEM_ACTIVE_CLASS)
}

조건문 사용하기

const handleToggleAccordionBody = function (e) {
  const accordionItemNode = e.target.closest('.AccordionItem')

  /* 방법 1 */
  /* accordionItemNode이 null이라면 */
  if (accordionItemNode) {
    accordionItemNode.classList.toggle(ACCORDION_ITEM_ACTIVE_CLASS)
  }
  
  /* 방법 2 */
  /* accordionItemNode이 null이 아니라면 */
  if (accordionItem !== null) {
    accordionItem.classList.toggle(ACCORDION_ITEM_ACTIVE_CLASS)
  } else {
    /* 디버깅을 위해 자세한 오류 메세지를 입력해주는 것을 권 */
    console.error(
      '클릭한 버튼의 부모노드 중 일치하는 대상이 없습니다. closest 메서드에 전달된 인자를 확인하세요.'
    )
  }
}

결론

const ACCORDION_ITEM_ACTIVE_CLASS = 'AccordionItem--open'
const accordionNode = document.querySelector('.Accordion')
const accordionItemNodeList = accordionNode.querySelectorAll('.AccordionItem')

const accordionArr = Array.from(accordionItemNodeList)

const handleToggleAccordionBody = function (e) {
  const accordionItemNode = e.target.closest('.AccordionItem')

  if (accordionItemNode !== null) {
    accordionItemNode.classList.toggle(ACCORDION_ITEM_ACTIVE_CLASS)
  } else {
    console.error(
      '클릭한 버튼의 부모노드 중 일치하는 대상이 없습니다. closest 메서드에 전달된 인자를 확인하세요.'
    )
  }
}

accordionArr.forEach(function (item) {
  item.addEventListener('click', handleToggleAccordionBody)
})

주의

• 메서드를 사용하기 전에 꼭 브라우저 호환성을 확인하기

• addEventListener를 사용할 때는 e.target을 사용해서 이벤트가 걸려있는 요소 확인하기

• 코드를 작성하고 나서 리팩토링하는 작업을 꼭 한다.

  • 불필요한 코드(예, 주석, console.log() 등)을 정리하고 개선할 사항이 있는지 확인한다.