React의 선언형 UI 이해: 복사 버튼 예시를 통한 학습

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

React 개발자, 특히 상태 관리와 선언형 UI 원리에 관심 있는 중급 이상 개발자

핵심 요약

• React의 선언형 UI 모델은 컴포넌트의 상태와 props에 따라 UI가 자동으로 업데이트됨
• 직접 DOM 조작은 React의 가상 DOM과 동기화 실패로 인해 예상치 못한 버그 발생
• useState 훅 사용이 상태 변경 시 UI 재렌더링을 보장하는 권장 방법

섹션별 세부 요약

1. 직접 DOM 조작의 문제점

• innerText 직접 수정 시 React가 DOM 변경을 인지하지 못해 상태 동기화 실패
• 개발 모드의 Strict Mode로 인해 컴포넌트 재렌더링 시 DOM 노드가 덮어씌워짐
• 예: e.currentTarget.innerText = 'Copied!' 변경 후 1초 후 원래 텍스트로 복원 실패

2. React 상태 관리로 해결

• useState 훅을 사용해 버튼 텍스트 상태(displayText)를 관리
• 클립보드 복사 후 setDisplayText('Copied!')로 상태 업데이트 → React 재렌더링
• setTimeout(() => setDisplayText(text), 1000)으로 1초 후 원래 상태로 복원
• 코드 예시:

import { useState } from 'react';
const CopyButton = ({ text }) => {
  const [displayText, setDisplayText] = useState(text);
  const handleClick = async () => {
    await navigator.clipboard.writeText(text);
    setDisplayText('Copied!');
    setTimeout(() => setDisplayText(text), 1000);
  };
  return {displayText};
};

3. 가상 DOM의 역할

• React는 가상 DOM을 통해 실제 DOM과 차이를 비교하고 최적화된 업데이트 수행
• 상태 변경 시 자동으로 UI 재렌더링 → DOM 노드 오류 없이 동기화
• 직접 DOM 조작은 가상 DOM과의 갈등으로 인해 비추천되는 반패턴

결론

• React 앱에서 DOM 조작은 대체로 피해야 할 반패턴이며, useState와 같은 상태 관리 훅을 사용하는 것이 안정적
• 선언형 UI의 핵심은 상태가 UI를 결정하는 것 → 상태 변경 시 React가 자동으로 UI를 업데이트
• 가상 DOM은 성능 최적화와 상태 동기화를 위해 필수적인 역할 수행