👻 리액트에서 DOM 직접 조작: 가상 DOM 불일치와 예측 불가능한 UI

Why Wrong?

How to Fix?

```jsx
import React from 'react';

function DirectDomManipulator() {
  const handleClick = () => {
    // 🚨 안티패턴: 리액트 컴포넌트 내에서 document 객체를 통한 직접 DOM 조작
    const element = document.getElementById('my-styled-div');
    if (element) {
      element.style.backgroundColor = 'lightblue';
      element.textContent = 'DOM 직접 변경됨!';
      // 만약 이 컴포넌트가 다시 렌더링되면,
      // 리액트는 자신의 상태가 아닌 이 직접 변경된 내용을 덮어씌울 수 있습니다.
    }
  };

  return (
    <div>
      <div id="my-styled-div" style={{ backgroundColor: 'lightgray', padding: '20px' }}>
        원래 내용
      </div>
      <button onClick={handleClick}>DOM 직접 변경</button>
    </div>
  );
}

export default DirectDomManipulator;
```

**문제점**: 위 코드에서 `my-styled-div` 요소는 리액트에 의해 렌더링되지만, 버튼 클릭 시 `document.getElementById`를 통해 직접 조작됩니다. 이는 리액트의 가상 DOM과 실제 DOM 간의 불일치를 초래하며, 추후 `DirectDomManipulator` 컴포넌트가 다시 렌더링될 때(`props`나 `state` 변경 등) 직접 변경된 내용이 리액트의 관리하에 있는 초기 상태로 되돌아가거나, 예상치 못한 동작을 하여 디버깅이 매우 어려워집니다.

```jsx
import React, { useState, useRef, useEffect } from 'react';

// ✅ 올바른 패턴: 상태(state)를 통해 UI 변경 제어
function StateControlledComponent() {
  const [bgColor, setBgColor] = useState('lightgray');
  const [content, setContent] = useState('원래 내용');

  const handleClick = () => {
    setBgColor('lightblue');
    setContent('상태를 통해 변경됨!');
  };

  return (
    <div>
      <div style={{ backgroundColor: bgColor, padding: '20px' }}>
        {content}
      </div>
      <button onClick={handleClick}>상태를 통해 변경</button>
    </div>
  );
}

// ⚡️ (참고) Refs를 이용한 제한적인 DOM 직접 접근 예시 (최후의 수단)
function RefDomManipulator() {
  const inputRef = useRef(null);

  useEffect(() => {
    // 컴포넌트 마운트 시 input에 포커스
    // 이처럼 리액트가 직접 제공하지 않는 저수준 DOM API가 필요할 때 useRef를 사용합니다.
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []); // 마운트 시 한 번만 실행되도록 빈 의존성 배열 사용

  const handleButtonClick = () => {
    if (inputRef.current) {
      inputRef.current.value = 'Refs로 값 설정'; // input의 value 속성도 state로 관리하는 것이 일반적이나, 예시를 위해 사용
    }
  };

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="여기에 포커스" />
      <button onClick={handleButtonClick}>Input 값 설정</button>
      <hr />
      <StateControlledComponent />
    </div>
  );
}

export default RefDomManipulator;
```

**설명**: 첫 번째 `StateControlledComponent` 예시는 `useState` 훅을 사용하여 배경색과 내용을 상태로 관리합니다. 버튼 클릭 시 상태만 업데이트하면 리액트가 알아서 해당 상태에 맞춰 UI를 효율적으로 다시 렌더링합니다. 이는 리액트의 선언적 패러다임에 부합하는 올바른 방식이며, 가상 DOM과의 불일치 문제를 원천적으로 방지합니다.

두 번째 `RefDomManipulator` 예시는 `useRef`를 사용하여 특정 DOM 노드(input)에 직접 접근하는 경우입니다. 하지만 이 경우에도 `useEffect` 훅 내에서만 DOM 조작을 수행하여 리액트의 라이프사이클에 맞춰 실행되도록 합니다. 이런 방식은 외부 라이브러리 연동, 포커스 관리, 미디어 재생 제어 등 리액트가 직접 제공하지 않는 저수준 DOM API가 필요한 경우에만 제한적으로 사용해야 합니다. 대부분의 UI 상호작용은 상태를 통해 관리되어야 합니다.

You Might Also Like