[TECH-QA] React에서 SVG 아이콘 다루기: 실용적인 예제와 팁

ref를 사용하는 이유

ref를 통해 할 수 있는 작업

📝 DOM 속성/상태 조회

• SVG 요소의 크기, 위치, 속성 등을 확인.
• 예: ref.current.getBoundingClientRect()를 호출해 SVG의 화면상 위치나 크기를 확인.
• 용도: 애니메이션이나 툴팁 위치 계산.

📝 직접 DOM 조작

• React 상태 외부에서 SVG의 속성을 동적으로 변경.
• 예: ref.current.setAttribute('fill', 'red')로 색상을 변경.
• 용도: React로 처리하기 복잡한 동적 스타일링.

📝 애니메이션 제어

• SVG 요소에 애니메이션을 적용하거나 제어.
• 예: ref.current.animate()를 사용해 CSS/SVG 애니메이션을 트리거.
• 용도: 아이콘에 클릭 시 깜빡이는 효과 추가.

📝 포커스 관리

• SVG 요소에 포커스를 설정하거나 확인.
• 예: ref.current.focus()로 접근성 개선.
• 용도: 키보드 내비게이션 지원.

📝 외부 라이브러리와 통합

• D3.js, GSAP 같은 라이브러리가 DOM 요소를 직접 조작해야 할 때.
• 예: ref.current를 라이브러리에 전달해 SVG 경로 애니메이션 적용.
• 용도: 복잡한 시각화 작업.

📝 이벤트 처리

• 특정 DOM 이벤트(예: 마우스 오버, 드래그)를 직접 감지.
• 예: ref.current.addEventListener('mouseover', handleMouseOver).
• 용도: React의 합성 이벤트로 처리하기 어려운 경우.

📝 예제

import React, { useRef, useEffect } from 'react';
import { _ICon } from './IcArrowLeft';

const ParentComponent = () => {
  const svgRef = useRef(null);

  useEffect(() => {
    if (svgRef.current) {
      // SVG 요소에 접근하여 작업 수행
      console.log('SVG 크기:', svgRef.current.getBoundingClientRect());
      
      // 예: 색상 변경
      svgRef.current.setAttribute('fill', 'purple');
      
      // 예: 클릭 이벤트 추가
      svgRef.current.addEventListener('click', () => {
        alert('SVG 클릭됨!');
      });
    }
  }, []);

  return (
    <div>
      <_ICon
        ref={svgRef}
        size={32}
        color="blue"
        filled={true}
        aria-label="왼쪽 화살표"
      />
    </div>
  );
};

export default ParentComponent;

• React 철학 준수: React는 DOM 직접 조작을 최소화하도록 권장합니다. 가능하면 상태/props로 UI를 관리하세요.
• 적절한 사용: ref는 포커스 관리, 애니메이션, 외부 라이브러리 통합 등 필수적인 경우에만 사용하세요.
• 접근성 고려: SVG에 aria-label 같은 속성을 추가해 접근성을 유지하세요.
• ref 전달 방식: _ICon React.forwardRef로 래핑되어 있어야 ref가 SVG 요소에 올바르게 연결됩니다.