SVGR - Transforms SVG into React Components. - SVGR
React-svgr
SVGR은 SVG(Scalable Vector Graphics) 파일을 React 컴포넌트로 변환하는 도구입니다. SVG 파일은 웹사이트에서 이미지를 표시하는 한 방법인데요. 크기를 늘리거나 줄여도 선명한 상태를 유지할 수 있는 이미지 파일입니다. SVGR을 사용하면 이 SVG 파일을 React 애플리케이션에서 쉽게 사용할 수 있는 컴포넌트로 바꿀 수 있습니다. 즉, SVG 파일을 가져와서 React 코드 안에서 바로 사용할 수 있게 도와주는 도구입니다.
SVG 파일을 React 컴포넌트로 변환: SVGR은 SVG 파일을 React 컴포넌트로 변환하여 코드 내에서 직접 사용할 수 있도록 합니다. 이렇게 하면 SVG 파일을 React 코드 안에 포함시키고, 필요할 때마다 사용할 수 있습니다.
SVG 최적화: SVGR은 SVG 파일을 최적화하여 파일 크기를 줄이고 로드 시간을 단축시킵니다. 최적화된 파일은 웹사이트를 빠르게 로드할 수 있게 도와줍니다.
사용자 정의 설정: SVGR은 다양한 설정 옵션을 제공하여 변환 과정을 사용자에 맞게 조정할 수 있습니다. 예를 들어, 특정 속성을 유지하거나 제거하는 등의 설정을 할 수 있습니다.
플러그인 및 API 지원: SVGR은 Webpack, Rollup 등의 번들러와 함께 사용할 수 있는 플러그인 및 CLI(Command Line Interface) 도구를 제공합니다. 이를 통해 프로젝트에 쉽게 통합할 수 있습니다.
주의사항: viewBox 속성
SVG 파일에는 viewBox
라는 속성이 있습니다. viewBox
는 SVG 이미지의 크기와 비율을 제어하는 데 사용되는데요. 이 속성이 있어야 이미지를 화면 크기에 맞게 조정할 수 있습니다. 그러나 SVGR의 기본 설정에서는 최적화를 위해 viewBox
속성을 자동으로 제거가 됩니다. 이렇게 되면 SVG 이미지 크기를 키웠을 때 퀄리티가 유지되지 않을수 있습니다. 즉 벡터 그래픽의 가장 큰 장점인 크기에 상관없이 선명한 화질을 유지하는 기능이 사라지는 것인데요.
이미지의 퀄리티가 중요하다면, viewBox
속성을 유지하는 것이 좋습니다. 따라서 Webpack 설정에서 removeViewBox: false
로 설정하는것을 추천드립니다.
https://react-svgr.com/
다음 내용이 궁금하다면?
이미 회원이신가요?
2024년 6월 11일 오전 12:30
오 viewBox가 어떤 역할인지 정확히는 몰랐는데 중요한 속성이군요. 핵심 요약 감사합니다.
@홍지상 맞습니다 중요한 속성이더라구요. 이것 때문에 문제가 생겼던 팀원 분이 공유를 해주셔서 알게 되었습니다.
1. 유명한 경제학자 케인스는 단기 투자 전략을 미인선발대회에 비유했다.
고용노동부에서 주관하는 청년미래플러스 3기를 모집 중이라고 합니다.
구직자와 재직자 두 가지 트랙을 동시에 모집한다고 하네요.
모집 기간: 6월 15일 ~ 8월 3일
성장이 어려운 환경에서의 개발자 생활
저런 개발자 생활도 한적이 있어서 다양한 생각이 든다.