[리액트] 리액트에서 DOM에 대한 직접 접근을 권장하지 않는 이유와 Ref 훅을 통한 DOM 접근

리액트는 가상DOM을 이용하여 변경된 부분만 렌더링을 시도합니다.

리액트에서 DOM에 직접 접근하는 것은 권장되지 않습니다. 이는 리액트의 핵심 원칙 중 하나인 가상 DOM(Virtual DOM)의 개념과 관련이 있습니다.

 

리액트는 가상 DOM을 사용하여 컴포넌트의 상태(state)나 속성(props)이 변경될 때마다 화면을 다시 그리지 않고, 변경된 부분만 감지하여 최소한의 렌더링을 수행합니다. 이를 통해 빠른 성능과 원활한 사용자 경험을 제공합니다.

 

그러나 DOM에 직접 접근하게 되면, 가상 DOM을 우회하여 실제 DOM에 직접 변경을 가하게 됩니다. 이는 리액트의 성능 최적화를 무력화시키고, 예상치 못한 결과를 초래할 수 있습니다.

 

따라서, 리액트에서는 state나 props를 변경하는 방법을 제공하며, 이를 통해 가상 DOM을 업데이트하고 화면을 다시 그리도록 합니다. 만약 DOM에 접근해야 하는 경우, 리액트에서 제공하는 Ref를 사용하여 DOM에 접근해야 합니다. Ref를 사용하면 DOM에 직접 접근하는 것이 아니라, Ref를 통해 컴포넌트의 인스턴스나 DOM 노드에 접근할 수 있습니다. 이는 가상 DOM과 함께 작동하여 성능을 보장합니다.

---

Ref  훅은 사용하면 DOM 에 접근할 수 있습니다.

 아래 예시는 Ref 를 사용하여 DOM에 접근하는 방법 중 일반화된 예시 중 하나 입니다.

 

import React, { useRef } from 'react';

function InputFocus() {
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
}

위 코드를 설명하자면,

useRef 훅을 사용하여 input 요소에 대한 Ref를 생성합니다. Ref 객체를 input 요소의 ref 속성에 할당하면, Ref 객체는 해당 DOM 노드를 참조하게 됩니다.

 

handleClick 함수에서는 input 요소의 focus 메소드를 호출하여 포커스를 맞추게 됩니다. 이를 위해 input 요소의 Ref 객체를 참조하여 focus 메소드를 호출합니다.

 

이와 같이 Ref를 사용하여 DOM에 접근할 수 있습니다. Ref를 사용하면 DOM 요소에 직접 접근하는 것이 아니라, Ref 객체를 통해 요소에 접근할 수 있으므로, 가상 DOM과 함께 사용할 수 있습니다. 이를 통해 성능을 최적화할 수 있습니다.

---

 Ref 도 집적접근이 가능하지만,  꼭 필요한 상황이 아니라면 피하는 것이 좋습니다.

리액트에서는 Ref를 사용하여 DOM에 직접 접근하는 것을 완전히 권장하지는 않습니다. Ref는 DOM에 접근하는 데 사용될 수 있지만, Ref를 사용할 때는 항상 조심해야 합니다.

 

왜냐하면, Ref를 사용하여 DOM에 접근하는 것은 보안 문제, 유지보수성, 그리고 코드의 복잡성 등을 야기할 수 있기 때문입니다. 예를 들어, Ref를 사용하여 다른 컴포넌트에서 다른 컴포넌트의 DOM에 직접 접근하는 것은 권장되지 않습니다.

 

또한, Ref를 사용하여 DOM에 접근하면 가상 DOM에서 캐시가 작동하지 않으므로, 성능 문제를 야기할 수 있습니다.

 

그러나 Ref는 일부 상황에서 유용할 수 있습니다. 예를 들어, 외부 라이브러리와 통합하거나, 애니메이션을 구현하거나, 파일 업로드 컴포넌트를 구현하는 등의 경우에는 Ref를 사용하여 DOM에 직접 접근할 필요가 있을 수 있습니다.

 

따라서, Ref를 사용할 때는 항상 주의해야하며, Ref를 사용하지 않고도 해결할 수 있는 문제는 Ref를 사용하지 않는 것이 좋습니다.