React SVG 다루기

이 글은 React 환경에서 SVG 이미지를 다루는 다양한 방법을 소개합니다. 비트맵 이미지와 달리 확대해도 깨지지 않는 벡터 기반의 SVG 특징을 설명하며, `<img>` 태그를 사용했을 때의 한계점(색상 변경 불가)을 지적합니다.

이후 SVG를 React 컴포넌트로 변환하여 `width`, `height`, `fill` 속성을 동적으로 제어하는 방법을 보여줍니다. 특히 `current` 값을 활용하여 SVG의 색상을 자유롭게 변경하는 기법을 설명하며, `@svgr/cli` 도구를 사용하여 SVG 파일을 React 컴포넌트로 자동 변환하는 방법까지 안내합니다.

이를 통해 개발자는 React 프로젝트에서 SVG를 더욱 유연하고 효율적으로 활용할 수 있습니다.