querySelector, 구조에 종속적이지 않게 가져올 수 있는 방법

DOM (Document Object Model)을 다룰 때 사용되는 closest이나 querySelector와 같은 메서드를 사용하면 코드가 특정 HTML 구조에 의존적이 되어 유지보수가 어려워질 수 있다.

 

element.closest 메서드는 특정한 속성을 가진 가장 가까운 부모를 반환

element.querySelector 메서드는 현재 Element에서 우리가 특정한 조상을 가진 child(children)을 반환

이런 메서드들은 특정 요소를 찾을 때 HTML 구조에 의존하게 된다. 만약 HTML 구조가 변경되면, 관련된 코드도 수정되어야 할 가능성이 높다.

 

구조에 종속적이지 않게 가져올 수 있는 방법은 코드를 작성할 때 HTML 구조에 대한 의존성을 최소화하고, 변경이 일어났을 때 영향을 최소화하도록 하는 방법을 고민해야 한다.

 

React 에서 구조에 종속적이지 않게 요소를 가져오는 방법 중 일반적인 패턴은 refs 를 활용한다.

ref 는 React 컴포넌트 내에서 특정 DOM 요소에 대한 참조를 생성하는데 사용된다.

 

예시

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

const MyComponent = () => {
  // useRef를 사용하여 DOM 요소에 대한 참조를 생성
  const myElementRef = useRef(null);

  useEffect(() => {
    // 이 부분에서 myElementRef.current를 사용하여 DOM 조작 수행 가능
    if (myElementRef.current) {
      myElementRef.current.style.backgroundColor = 'yellow';
    }
  }, []); // 두 번째 매개변수로 빈 배열을 전달하여 componentDidMount와 동일한 효과를 얻음

  return (
    <div ref={myElementRef}>
      This is my element.
    </div>
  );
};

export default MyComponent;

useRef 를 사용하여 myElementRef 라는 ref를 생성하고, JSX의 <div> 엘리먼트에 해당 ref를 할당

useEffect 훅을 사용해서 컴포넌트가 마운트되면 (ref에 대한 참조가 설정된 후) 특정 DOM조작을 수행하도록 설정되었다.

 

이렇게 하면 요소를 직접 참조할 수 있어서 구조의 변경에 상관없이 원하는 DOM 조작을 수행 할 수있다.

함수 컴포넌트에서 ref를 사용하여 클래스 컴포넌트와 유사한 효과를 얻을 수 있다.

 

하지만 가능하면 ref를 사용하기 보다는 리액트의 상태와 속성을 활용하여 데이터를 관리하고, 컴포넌트를 업데이트하는 방향으로 개발하는 것이 좋다. ref는 특별한 경우에만 사용되어야 하고 상태와 속성을 통한 데이터 흐름을 선호하는 것이 좋다.

 

 

하지만 특정 상황에서 명령형(Imperative) 코드를 사용하는 것이 적절할 수 있다.

1. 애니메이션 및 비동기 작업

명령형 코드는 일반적으로 순차적인 흐름을 갖기 때문에 애니메이션과 같은 시간에 따라 변하는 작업이나 비동기 작업을 다룰 때 유용하다. 예를 들어, 특정 상태에 따라 애니메이션을 시작하거나, 비동기 데이터를 가져와서 상태를 갱신하는 경우가 해당된다.

Jsx

// 명령형 코드 예시: 애니메이션 시작
const startAnimation = () => {
  const element = document.getElementById('animatedElement');
  element.style.transition = 'transform 1s';
  element.style.transform = 'translateX(100px)';
};

// 리액트 컴포넌트에서 호출
const MyComponent = () => {
  useEffect(() => {
    startAnimation();
  }, []);

  return <div id="animatedElement">Hello, Animation!</div>;
};

 

2. DOM 조작이 필요한 특별한 경우

가끔은 특정한 DOM 조작이 필요한 경우가 있다.

예를 들어, 외부 라이브러리와 통합하거나, 특정한 DOM 요소의 크기를 계산하거나 조작해야 할 때 명령형 코드가 필요할 수 있다.

JSX

// 명령형 코드 예시: 외부 라이브러리 통합
useEffect(() => {
  const chart = new Chart(document.getElementById('chart'), chartConfig);
  // ...
}, []);

그러나 이런 경우에도 명령형 코드를 사용할 때는 가능한 그 영역을 최소화 하고, 명령형 코드를 감싸고 있는 선언형 코드를 유지하는 것이 좋다.

명령형 코드는 예측 가능성과 유지보수성을 낮출 수 있기 때문에 신중하게 사용해야한다.

 

React는 선언형 프로그래밍을 지향하는 라이브러리다.

판단하에 명령형 or 선언형으로 코드를 작성하자

 

참고

https://mingule.tistory.com/61