[React] background-image에 svg 사용하기 (inline SVG)

위치별 파일 경로 기준

---

• JSX 엘리먼트 속성의 루트 폴더 기준 : public
• CSS 파일 루트 폴더 기준 : src
• 파일 최상단 import 구문 : src 폴더만 처리 가능(public 폴더에 있는 파일은 불가)
• <img> 태그 src 속성(JSX 태그 속성)에 src 폴더에 있는 이미지 파일을 지정하려면…
  
  • 파일 최상단에서 불러온 이미지 파일을 src 속성에 할당하거나,
  • src 속성 안에서 require() 사용 e.g. <img src={require('...').default} />

 

문제 상황

---

 

JSX 엘리먼트 속성의 루트 폴더 기준은 public 폴더므로 이미지 파일이 src 폴더에 있다면 파일 최상단에서 이미지 파일을 import 한 후 인라인 스타일 url() 함수에 사용할 수 있다. *.png, *.webp 같은 이미지 파일은 아래 방법으로 잘 작동한다.

// src/assets/image 폴더에 있는 profile-image.png 파일 import
import ArrowDown from '../assets/image/arrow-down.png';

// 컴포넌트 리턴문
<select
  style={{ backgroundImage: `url(${ArrowDown})` }}
  className="bg-no-repeat bg-right pr-4"
>
  ...
</select>;

 

하지만 위와 동일한 방법으로 .svg 파일에 적용해보면 이미지가 안나온다. 😢

 

해결 방법

---

해결 방법은 2가지가 있다.

1. svg 파일을 Data URI에서 사용할 수 있는 문자열로 변환
2. CSS 파일에 커스텀 클래스를 만들고 url() 함수에 svg 파일 경로 명시 (SSR / SSG에선 안될수도 있음)

 

방법 1 — Data URI 사용

💡 이미지 파일을 base64 URI로 바꿔주는 url-loader 같은 라이브러리도 있다.

 

svg 파일을 Data URI에서 사용할 수 있는 문자열로 변환하면 CSS url() 함수에 사용할 수 있다. url() 함수 인자엔 이미지 파일의 상대 / 절대 경로, 웹 리소스 주소 혹은 data URL / blob URL을 추가할 수 있다.

import ArrowDown from '../assets/image/arrow-down.svg';
import { renderToStaticMarkup } from 'react-dom/server';

// 컴포넌트 본문
// svg 파일을 Data URI에서 사용할 수 있는 문자열로 변환
const svgString = encodeURIComponent(renderToStaticMarkup(<ArrowDown />));

// 컴포넌트 리턴문
<select style={{ backgroundImage: `url("data:image/svg+xml,${svgString}")` }}>
  ...
</select>;

 

Percent Encoding

URI에서 문법적 의미를 갖는 문자를 예약 문자라고 한다. 예를들어 URI에서 & 앰퍼샌드는 AND 의미를 갖는다. 만약 쿼리스트링(?key=value) value 값에 & 같은 예약 문자를 문법적 의미가 아닌 문자 그대로 사용하려면 인코딩(이스케이프)이 필요하다.

 

🔍️ 예약 문자 목록 — URI에서 문법적 의미를 가짐 / 문자 그대로 사용하려면 인코딩 필요

!   *   '   (   )   ;   :   @   &   =   +   $   ,   /   ?   #   [   ]

 

🔍️ 비예약 문자 목록 — 인코딩 필요하지 않음

A-Z   a-z   0-9   -   _   .   ~

 

한글, 한자 같은 non-ASCII 문자를 URI에서 사용하려면 마찬가지로 인코딩이 필요하다. 이처럼 URI에서 사용할 수 없는 문자열을 사용할 수 있도록(혹은 예약 문자를 문법적 의미가 아닌 문자 그대로 사용할 때) 변환하는 과정을 Percent Encoding(URL Encoding)이라고 부른다.

 

Percent Encoding 인코딩한 문자는 % 로 시작하고 그뒤에 16진수 숫자를 붙여서 표현한다. e.g. & → %26

 

encodeURIComponent / encodeURI

encodeURIComponent 메서드는 문자열을 UTF-8로 이스케이프한 문자열을 반환한다. 즉 URI에서 사용할 수 있도록 Percent Encoding한 문자열을 반환한다. 이와 비슷한 encodeURI 메서드도 있다. 이 둘 메서드의 수행 기능은 동일하지만 이스케이프하지 않는 문자열에 차이가 있다.

const music = encodeURIComponent('Rock&Roll'); // 'Rock%26Roll'
const url = `https://google.com/search?q=${music}`;

 

• encodeURIComponent : 주로 쿼리스트링(?key=value)의 value 부분을 인코딩할 때 사용
  
  • 제외 문자 : A-Z  a-z  0-9  -  _  .  !  ~  *  '  (  )
  • 디코딩 메서드 : decodeURIComponent
• encodeURI : URI 전체를 인코딩할 때 사용 (URI를 구성하는데 필요한 예약/비예약 문자는 인코딩 안함)
  • 제외 문자 : A-Z  a-z  0-9  ;  ,  /  ?  :  @  &  =  +  $  -  _  .  !  ~  *  '  (  )  #
  • 디코딩 메서드 : decodeURI

 

renderToStaticMarkup

React 엘리먼트에 대해 정적 HTML(HTML 문자열)을 생성하는 메서드. data-reactroot 처럼 리액트 내부적으로 사용하는 DOM 어트리뷰트(data-*)는 만들지 않는다. 따라서 ReactDOM.hydrate()를 사용해 상호작용할 수 있는 이벤트를 주입할 수 없다.

const staticMarkup = renderToStaticMarkup(<h1>hello world</h1>);
console.log(staticMarkup); // <h1>hello world</h1>
console.log(typeof staticMarkup); // string

 

Data URI

data:[<mime type>][;charset=<charset>][;base64],<encoded data>

 

Data URI 스킴(scheme)은 data: 접두사가 붙은 문자열로, 파일을 문자열로 변환한 것으로 생각하면 된다. 작은 이미지 등의 파일을 문서에 인라인으로 넣기 위해 사용한다. 이미 문서에 포함했기 때문에 서버에 요청하지 않고 파일을 사용할 수 있다. Data URI는 이미지 태그의 src 속성이나 CSS 속성의 url 함수에서 사용할 수 있다.

{ backgroundImage: `url("data:image/svg+xml,${svgString}")` }

 

데이터가 텍스트 형식이면(React에서 제공하는 renderToStaticMarkup 메서드를 사용해 React 엘리먼트 → HTML 문자열로 변경), 데이터를 이스케이프한 후(encodeURIComponent 메서드 사용) MIME 타입에 맞춰서 바로 임베드할 수 있다. *.svg 파일의 MIME 타입은 image/svg+xml 이다.

 

💡 데이터 타입을 생략하면 text/plain;charset=US-ASCII 을 기본값으로 사용한다.

 

데이터가 이미지 파일이라면 base64(데이터를 64진법으로 나타낸 것)로 인코딩한 이진 데이터를 임베드할 수 있다(물론 일반 텍스트도 base64로 인코딩할 수 있다). 바이너리 데이터를 base64로 인코딩해서 텍스트로 다룰 수 있지만 원본보다 약 33% 정도 크기가 늘어나는 단점이 있다. 따라서 큰 이미지에 사용하기엔 적합하지 않다.

// 이미지를 Data URI로 변한하면 아래처럼 나온다
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA////sViHsVR/rSQDsVyLRwD++ffuUBL//Pv97+vrT...';

코드 참고 MDN

 

Hello World! 문자열의 text/plain 데이터 ▼

data:,Hello%2C%20World!

 

Hello World! 문자열의 base64 인코딩 버전 ▼

data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D

 

<h1>Hello, World!</h1>인 HTML 문서 ▼

data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E

 

자바스크립트 alert 창을 실행하는 HTML 문서 ▼

data:text/html,<script>alert('hi');</script>

 

방법 2 — CSS 파일에 커스텀 클래스 정의

💡 NextJS(SSG / SSR)에선 상황에 따라 아래 방법 안될수도 있으니 참고.

 

CSS 파일에서 커스텀 클래스를 만든 후 background-image 속성 url() 함수에 svg 파일 경로를 명시한다. 그런 후 필요한 컴포넌트에서 class를 추가해서 사용하면 된다.

.bg-arrow-down {
  background-image: url('../assets/image/arrow-down.svg') no-repeat right center; /* no-repeat 100% 50% */
}

// 컴포넌트 return문
<select className="bg-arrow-down pr-4">...</select>;

 

레퍼런스

---

• Base 64 간단 정리하기
• Data URIs - HTTP | MDN
• ReactDOMServer - React
• [React] Create-react-app 프로젝트에서 이미지 경로를 설정하는 4가지 방법
• 09: SVG with Data URIs | CSS-Tricks

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요