[🚨 Error 🚨] addEventListener 콜백 함수 state 값 참조 에러

문제가 발생한 배경

카테고리 버튼을 누르면 드롭다운 메뉴가 열리고 다시 버튼을 누르면 드롭다운 메뉴를 닫고 싶었지만 내가 원하는 대로 동작하지 않았다.

• 문제 상황
  

• 내가 원하는 동작
  

전체 코드

import { useEffect, useState } from 'react'
import styles from './Category.module.css'
import TECH_IMAGE from '../../utils/constant/techImage'
import ARROW_ICON from '../../utils/constant/arrowIcon'

const ALL = 'ALL'
const CATEGORY = 'category'
const CATEGORY_ARRAY = [
  'ALL',
  'HTML',
  'CSS',
  'JAVASCRIPT',
  'REACT',
  'TYPESCRIPT',
  'NEXT.JS',
  'GIT',
  'CS'
]
function Category() {
  const [isOpen, setIsOpen] = useState(false)
  const [currentCategory, setCurrentCategory] = useState(ALL)

  useEffect(() => {
    document.addEventListener('click', handleClick)

    return () => {
      document.removeEventListener('click', handleClick)
    }
  }, [])

  const handleClick = (e) => {
    if (e.target.dataset.status === CATEGORY) {
      setIsOpen(!isOpen)
      return
    }
    setIsOpen(false)
  }

  const handleCurrentCategory = (e) => {
    setCurrentCategory(e.target.textContent)
  }

  return (
    <>
      <div className={styles.category}>
        <div data-status={CATEGORY} className={styles.buttonBox}>
          <button data-status={CATEGORY} className={styles.button}>
            <img
              className={styles.categoryIcon}
              src={TECH_IMAGE[currentCategory]}
              alt={`카테고리 ${currentCategory} 아이콘`}
            />
            {currentCategory}
          </button>
          <img
            data-status={CATEGORY}
            className={styles.arrowIcon}
            src={ARROW_ICON[isOpen]}
            alt="카테고리 토글 버튼"
          />
        </div>
        {isOpen && (
          <ul className={styles.listBox}>
            {CATEGORY_ARRAY.map((category, idx) => {
              return (
                <li
                  onClick={(e) => handleCurrentCategory(e)}
                  key={idx}
                  className={styles.list}
                >
                  <img
                    className={styles.categoryIcon}
                    src={TECH_IMAGE[category]}
                    alt={`카테고리 ${category} 아이콘`}
                  />
                  {category}
                </li>
              )
            })}
          </ul>
        )}
      </div>
    </>
  )
}

export default Category

---

문제의 원인 알아보기

아래 코드와 같이 isOpen을 콘솔에 출력해보면 드롭다운이 열려있음에도 false로 출력되는 것을 확인했다.

 useEffect(() => {
    document.addEventListener('click', handleClick)

    return () => {
      document.removeEventListener('click', handleClick)
    }
  }, [])
                                                                               
const handleClick = (e) => {
  	console.log(isOpen)
    if (e.target.dataset.status === CATEGORY) {
      setIsOpen(!isOpen)
      return
    }
    setIsOpen(false)
}

드롭다운이 열려있으면 isOpen이 true상태인데 왜 false가 출력될까?

이 문제는 JavaScript의 클로저(Closure) 개념과 관련이 있다.

클로저(Closure)란?
함수가 생설될 때 해당 함수가 속한 렉시컬 환경을 기억하는 것이다. 중요한 점은 함수가 생성될 때 외부 변수에 대한 참조를 기억하는 것이다.

addEventListener에 등록된 콜백 함수가 최초에 state 변수의 값을 참조할 때의 값을 기억하고 있고
이 콜백 함수는 이후에도 state의 변경 사항을 알지 못하기 때문에 리렌더링 후에도 이전 참조 값을 유지한다.

내 코드에서 isOpen은 false로 초기 값을 설정했기 때문에 handleClick함수에서 isOpen의 참조 값은 언제나 false로 기억되어서 setIsOpen(!isOpen)을 해도 드롭다운 메뉴가 false가 되지 않았던 것이다.

---

문제 해결 방법

1. useEffect를 렌더링 할 때 마다 실행
↪ 이렇게 하면 렌더링이 될 때 마다 useEffect를 실행 하기 때문에 state의 값을 추적할 수 있다.

// 렌더링 될 때 마다 실행
 useEffect(() => {
    document.addEventListener('click', handleClick)

    return () => {
      document.removeEventListener('click', handleClick)
    }
  })
                                                                               
const handleClick = (e) => {
  	console.log(isOpen)
    if (e.target.dataset.status === CATEGORY) {
      setIsOpen(!isOpen)
      return
    }
    setIsOpen(false)
}

2. useEffect의 dependency array(의존성 배열)에 state 값 추가하기
↪ 이 방법도 1번 방법과 비슷하게 state 값이 변할 때 마다 useEffect를 실행하여 매번 최신 state 값을 참조할 수 있다.

// isOpen(state) 값이 변할 때 마다 실행
 useEffect(() => {
    document.addEventListener('click', handleClick)

    return () => {
      document.removeEventListener('click', handleClick)
    }
  }, [isOpen])
                                                                               
const handleClick = (e) => {
  	console.log(isOpen)
    if (e.target.dataset.status === CATEGORY) {
      setIsOpen(!isOpen)
      return
    }
    setIsOpen(false)
}

3. setter함수의 함수형 업데이트 사용
↪ 함수형 업데이트를 사용하여 이전 상태 값을 매개변수로 받아와서 새로운 상태 값을 설정할 수 있다.

 useEffect(() => {
    document.addEventListener('click', handleClick)

    return () => {
      document.removeEventListener('click', handleClick)
    }
  }, [])
                                                                               
const handleClick = (e) => {
  	console.log(isOpen)
    if (e.target.dataset.status === CATEGORY) {
      // 이전 state 값 가져오기
      setIsOpen((prev) => !prev)
      return
    }
    setIsOpen(false)
}

---

내가 선택한 해결 방법

나는 2번 방법이 코드 가독성이나 의도 파악이 잘 된다고 생각했었는데 멘토님께 여쭤보니깐 2번 방법을 사용하는 것도 괜찮지만 3번 함수형 업데이트를 사용하는 것이 안정성이나 메모리적인 측면에서 좋을 것 같다고 말씀해주셔서 3번 방법을 통해 문제를 해결하였다!

---

🙃 도움이 되었던 자료

Web: Event와 addEventListner 알아보기 (개념, React에서 주의할 점)
↪ 👍 코드잇 스프린트 같은 팀인 봉찬님의 추천