SvgIcon 컴퍼넌트 개선: sprite 이미지 라이브러리로 생성 및 이용

❓ GIFT 프로젝트 진행 중 svg 아이콘들을 어떻게 관리할까 고민을 하게 되었다. 무거운 gif 파일들을 많이 받아오는 사이트 특성 상 성능 최적화를 특히나 더 고려해야하기 때문이다. 성능 최적화와 컴퍼넌트 재사용 문제를 고민하며 개선하고 배워과는 과정을 기록한다.

🚩 svg sprite 기법으로 리액트에서 SvgIcon 컴퍼넌트를 만들어보자.

• svg sprite를 이용해 서버와의 통신을 최소화한다.
• svg sprite 이미지를 외부 프로그램 없이 쉽게 추가하도록 한다.
• html 파일과 관심사를 분리하기 위해 파일로 받고 사용하도록 한다.
• 의미를 가진 아이콘이라면 보조기기로 대체 텍스트를 인지할 수 있어야 한다.
• svg 프레임은 기본적으로 부모 요소의 크기에 가득차며, height나 width로 지정해줄 수도 있다.

🌱 SvgIcon 컴퍼넌트 관련 링크
1. SvgIcon 컴퍼넌트: svg sprite html에 임베드 방식
2. SvgIcon 컴퍼넌트 개선: sprite 이미지 라이브러리로 생성 및 이용

왜 개선이 필요한가?

• 새로운 아이콘이 추가될 때마다 외부 프로그램을 실행시키는 점이 번거로웠고 팀 작업에서도 용이하지 않았다.

• svg 파일을 한 번 받아오는 것이 크리티컬한 성능 이슈와 관련이 없다는 점에서 html 파일과 관심사를 분리하는 것에 대한 이점이 더 크다고 판단했다.

개선 방법

1. svgstore 라이브러리 사용

• svgstore - npm 라이브러리를 설치한다.

$ npm install --save svgstore

• package.json에 명령어를 추가한다.

"make-sprite": "svgstore -o 파일-생성-경로/파일이름.svg 변환-파일-경로/*.svg"

이제 위와 같이 assets 폴더 안에 필요한 svg 파일들을 다 넣고 npm run make-sprite 명령어만 실행시니면 sprites.svg 파일이 생성된다!

2. 파일로 불러오기

• 컴포넌트에서 임포트하기

import sprites from './sprites.svg';

• href에 불러온 sprites 이미지를 추가해준다. (이미지#id)

<use href={`${sprites}#${id}`} fill={useFill} />

💡 배운 점

• svgstore 라이브러리
• 효율적인 작업 방식

📌 참고 링크
svgstore - npm