August 18, 2025

🕳️ `querySelector` 체이닝 지옥: 과도한 DOM 탐색과 성능 저하, 유지보수성 악화

JavaScript

React

성능

아키텍처

컴포넌트

웹표준

렌더링전략

Summary

querySelector 체이닝은 DOM 탐색 성능 저하, 유지보수성 악화, 깨지기 쉬운 코드, 가독성 저하를 야기합니다. CSS 선택자 최적화, querySelectorAll, closest(), React Refs, 이벤트 위임, 상태 관리 라이브러리 활용 등의 방법으로 해결할 수 있습니다.

Why Wrong?

querySelector 체이닝은 특정 요소를 찾기 위해 DOM 트리를 깊이 탐색하는 방식입니다. 필요 이상으로 깊거나 긴 체이닝은 다음과 같은 문제점을 야기합니다.

성능 저하: DOM 탐색은 비용이 많이 드는 작업입니다. 특히 복잡한 페이지에서 querySelector 체이닝을 과도하게 사용하면 브라우저가 요소를 찾기 위해 불필요한 연산을 수행해야 하므로 성능이 저하될 수 있습니다.
유지보수성 악화: 체이닝이 길어질수록 코드를 이해하고 수정하기 어려워집니다. DOM 구조가 변경되면 체이닝된 코드 전체를 수정해야 할 수도 있습니다.
깨지기 쉬운 코드: DOM 구조에 강하게 결합되어, 약간의 변경에도 코드가 쉽게 망가질 수 있습니다.
가독성 저하: 코드가 길고 복잡해져서 다른 개발자가 코드를 이해하기 어려워집니다.

이러한 이유로 querySelector 체이닝은 최소화하고, 더 효율적인 DOM 탐색 방법이나 접근 방식을 사용하는 것이 좋습니다.

How to Fix?

다음과 같은 방법으로 querySelector 체이닝 문제를 해결할 수 있습니다.

CSS 선택자 최적화: querySelector에 전달하는 CSS 선택자를 최대한 구체적으로 작성하여 탐색 범위를 줄입니다. 불필요한 복잡한 선택자를 피하고, id나 class를 활용하여 직접적으로 요소를 선택하는 것이 좋습니다.
querySelectorAll 활용: 여러 요소를 한 번에 선택해야 하는 경우, querySelectorAll을 사용하여 필요한 요소만 선택하고 반복문을 통해 처리합니다.
closest() 메서드 활용: 특정 요소에서 가장 가까운 상위 요소를 찾을 때 closest() 메서드를 사용합니다. 이를 통해 불필요한 DOM 탐색을 줄일 수 있습니다.
React Refs 사용: React에서는 컴포넌트 내에서 DOM 노드에 직접 접근해야 하는 경우, useRef 훅을 사용하여 Refs를 생성하고 해당 DOM 노드를 참조합니다. 이를 통해 querySelector를 사용하지 않고도 DOM 노드에 직접 접근할 수 있습니다.
이벤트 위임: 이벤트 위임을 통해 상위 요소에 이벤트 리스너를 등록하고, 이벤트가 발생한 요소에 따라 다른 동작을 수행합니다. 이를 통해 개별 요소에 이벤트 리스너를 등록하는 대신, 상위 요소에 하나의 이벤트 리스너만 등록하여 성능을 향상시킬 수 있습니다.
상태 관리 라이브러리 활용: 복잡한 상태 관리가 필요한 경우, Redux, Zustand, Recoil과 같은 상태 관리 라이브러리를 활용하여 상태를 중앙 집중식으로 관리하고 컴포넌트 간의 데이터 흐름을 효율적으로 제어합니다.

Before Code (Bad)

function handleClick() {
  const element = document.querySelector('.container .item:nth-child(2) .content .title');
  if (element) {
    element.textContent = 'Updated Title';
  }
}

After Code (Good)

import React, { useRef, useEffect } from 'react';

function MyComponent() {
  const titleRef = useRef(null);

  useEffect(() => {
    if (titleRef.current) {
      titleRef.current.textContent = 'Updated Title';
    }
  }, []);

  return (
    <div className="container">
      <div className="item">
        <div className="content">
          <h2 className="title" ref={titleRef}>Original Title</h2>
        </div>
      </div>
    </div>
  );
}

export default MyComponent;

`closest()` 메서드는 특정 요소의 상위 요소 중 가장 가까운 요소를 찾을 때 유용합니다. 복잡한 DOM 구조에서 특정 조건을 만족하는 상위 요소를 쉽게 찾을 수 있습니다.

https://developer.mozilla.org/ko/docs/Web/API/Element/closest

`querySelectorAll()` 메서드는 주어진 CSS 선택자에 일치하는 모든 요소를 NodeList 형태로 반환합니다. 이를 통해 한 번의 호출로 여러 요소를 선택하고, 반복문을 사용하여 각 요소에 대해 작업을 수행할 수 있습니다.

https://developer.mozilla.org/ko/docs/Web/API/Document/querySelectorAll