SVGR로 SVG를 React에 통합: viewBox 속성의 중요성

SVGR은 SVG(Scalable Vector Graphics) 파일을 React 컴포넌트로 변환하는 도구입니다. SVG 파일은 웹사이트에서 이미지를 표시하는 한 방법인데요. 크기를 늘리거나 줄여도 선명한 상태를 유지할 수 있는 이미지 파일입니다. SVGR을 사용하면 이 SVG 파일을 React 애플리케이션에서 쉽게 사용할 수 있는 컴포넌트로 바꿀 수 있습니다. 즉, SVG 파일을 가져와서 React 코드 안에서 바로 사용할 수 있게 도와주는 도구입니다.

1. SVG 파일을 React 컴포넌트로 변환: SVGR은 SVG 파일을 React 컴포넌트로 변환하여 코드 내에서 직접 사용할 수 있도록 합니다. 이렇게 하면 SVG 파일을 React 코드 안에 포함시키고, 필요할 때마다 사용할 수 있습니다.

2. SVG 최적화: SVGR은 SVG 파일을 최적화하여 파일 크기를 줄이고 로드 시간을 단축시킵니다. 최적화된 파일은 웹사이트를 빠르게 로드할 수 있게 도와줍니다.

3. 사용자 정의 설정: SVGR은 다양한 설정 옵션을 제공하여 변환 과정을 사용자에 맞게 조정할 수 있습니다. 예를 들어, 특정 속성을 유지하거나 제거하는 등의 설정을 할 수 있습니다.

4. 플러그인 및 API 지원: SVGR은 Webpack, Rollup 등의 번들러와 함께 사용할 수 있는 플러그인 및 CLI(Command Line Interface) 도구를 제공합니다. 이를 통해 프로젝트에 쉽게 통합할 수 있습니다.

주의사항: viewBox 속성

SVG 파일에는 viewBox라는 속성이 있습니다. viewBox는 SVG 이미지의 크기와 비율을 제어하는 데 사용되는데요. 이 속성이 있어야 이미지를 화면 크기에 맞게 조정할 수 있습니다. 그러나 SVGR의 기본 설정에서는 최적화를 위해 viewBox 속성을 자동으로 제거가 됩니다. 이렇게 되면 SVG 이미지 크기를 키웠을 때 퀄리티가 유지되지 않을수 있습니다. 즉 벡터 그래픽의 가장 큰 장점인 크기에 상관없이 선명한 화질을 유지하는 기능이 사라지는 것인데요.

이미지의 퀄리티가 중요하다면, viewBox 속성을 유지하는 것이 좋습니다. 따라서 Webpack 설정에서 removeViewBox: false로 설정하는것을 추천드립니다.

https://react-svgr.com/