문제상황
alert 창에 svg가 두종류 필요한 상황이었다. 사이즈나 색상 변경이 있을 수도 있을 것 같아서 스프라이트 이미지로 넣을까 svg로 넣어서 가져올까 찾아보니 그냥 인라인으로 넣을까 고민하던 차 한번 정리해두려고 한다.
svg 를 사용하는 방법은 주로 이런 경우로 나뉘었다.
[ 작은 프로젝트, 적은 수의 SVG ]
인라인 SVG를 사용하여 간단하게 관리
[ 중간 규모 프로젝트 ]
SVG를 별도의 React 컴포넌트로 만들어 재사용
[ 대규모 프로젝트, 많은 수의 SVG ]
SVG 스프라이트를 사용하여 모든 아이콘을 하나의 파일로 관리
또는 SVG 아이콘 라이브러리 사용 (예: @heroicons/react)
지금은 작은 규모의 프로젝트를 해보는 중이라서 인라인으로 하면 편할 것 같긴 했지만 나중을 위해서 또 유지보수 하기 편하려면 컴포넌트로 써보는 게 좋을 것 같았다. 🧐
- 각 SVG 아이콘을 독립적인 React 컴포넌트로 만든다.
- SVG의 내용을 직접 JSX로 변환하여 컴포넌트 내부에 포함시킨다.
이렇게 하면 확실히 유동적으로 쓸 수 있을 것 같아 좋았는데 성능 측면에서 더 이점이 있나? 싶어 찾아보았더니
SVG를 컴포넌트화:
재사용성 증가:
아이콘 컴포넌트에 props를 전달할 수 있어, 크기나 색상 등을 쉽게 커스터마이즈할 수 있습니다.
타입 안전성:
TypeScript를 사용하여 각 아이콘 컴포넌트의 props 타입을 정의합니다.
이 방식의 장점은:
외부 SVG 파일에 의존하지 않아 파일 관리가 간편해집니다.
JavaScript/TypeScript 코드로 변환되어 번들에 포함되므로, 별도의 asset 로딩이 필요 없습니다.
React의 컴포넌트 시스템을 활용하여 아이콘을 더 유연하게 사용할 수 있습니다.
오. 별도의 에셋 로딩이 필요없다는 점은 생각 못 했었는데 좋다~
