React의 선언적 특성 이해: Vanilla JS DOM 조작의 함정과 올바른 접근 방식

핵심 기술

이 콘텐츠는 React의 선언적 렌더링 모델을 설명하며, React 상태 관리를 사용하지 않고 Vanilla JavaScript로 직접 DOM을 조작하는 것이 왜 비효율적이고 잠재적인 버그를 유발하는지를 보여줍니다. React의 useState를 활용한 올바른 접근 방식을 제시하며, React가 UI를 어떻게 관리하는지에 대한 근본적인 이해를 돕습니다.

기술적 세부사항

• 문제점 재현: onClick 핸들러 내에서 e.currentTarget.innerText를 직접 변경하여 복사 버튼을 구현하려 했으나, 1초 후 원래 텍스트로 돌아오지 않는 현상 발생.
  • navigator.clipboard.writeText(text)로 클립보드에 복사.
  • e.currentTarget.innerText = 'Copied!';로 버튼 텍스트 변경.
  • await new Promise((resolve) => setTimeout(resolve, 1000));로 1초 대기.
  • e.currentTarget.innerText = text;로 원래 텍스트로 복구 시도 실패.
• 원인 분석: React는 가상 DOM을 사용하여 실제 DOM을 관리하며, 개발자가 직접 DOM을 조작하면 React가 변경 사항을 인지하지 못합니다. 특히 개발 모드의 Strict Mode에서 DOM 노드가 재빌드되는 과정에서 직접 조작된 DOM은 무시되거나 예기치 않게 동작할 수 있습니다.
• 올바른 React 방식: useState를 사용하여 컴포넌트의 상태를 관리하고, 상태 변경을 통해 UI를 갱신합니다.
  • const [displayText, setDisplayText] = useState(text);
  • setDisplayText('Copied!'); 호출로 상태 변경 및 UI 갱신 트리거.
  • setTimeout(() => setDisplayText(text), 1000);로 상태를 원래대로 복구하여 재렌더링.
• React의 장점: 상태 기반의 선언적 렌더링은 UI가 컴포넌트 로직과 항상 동기화되도록 보장하며, DOM 조작 관련 버그를 방지합니다.

개발 임팩트

Vanilla JavaScript를 통한 직접적인 DOM 조작이 React 환경에서는 안티 패턴임을 명확히 보여줌으로써, 개발자가 React의 렌더링 파이프라인을 올바르게 이해하고 사용할 수 있도록 돕습니다. 이는 코드의 안정성을 높이고 디버깅 시간을 단축하는 데 기여합니다.

커뮤니티 반응

(본문에서 직접적으로 언급된 커뮤니티 반응은 없습니다. 다만, 이 주제는 React 개발자들 사이에서 흔히 발생하는 문제이며, React 공식 문서나 관련 커뮤니티 포럼에서 자주 논의되는 내용입니다.)