[React] 이미지 사용의 모든 것(feat. SVG, SVGO)

웹사이트를 제작하다보면 필수적으로 이미지 파일을 사용해

화면을 구성해야 하는 일이 생긴다.

(안 생긴다면 그 사이트 제작은 지금 끝내라)

 

 

Front-End 라이브러리로 React를 사용한다면

이미지를 사용하는 방식이 여러가지일 것이다.

 

어떤 상황에서 어떤 방식이 맞는지,

혹은 사용법이 정확한지 알기 힘들다.

 

그래서 이번 포스팅에서는 리엑트에서 이미지를 활용하는 법에 대해 정리하고자 한다.

 

 

 

 

1. Pubilc 폴더에 이미지 파일 위치시키고 활용

---

❗️제일 간편하고 직관적인 방법이다.

 

 

Create React App으로 프로젝트를 생성하면

Public 폴더에 index.html을 비롯한 정적 파일이 있다.

 

여기에 images 폴더를 만들고 이미지 파일을 넣어둔다.

 

그리고 실제 이미지를 활용할 소스 코드에서는 아래와 같이 활용한다.

 

import React from 'react'

export default function ImageTrain() {
	return(
    	<div>
        	<img src={'/images/lesme.jpg'} alt='오류이미지' />
        </div>
    );
}

 

별도의 경로 설정 없이 Public 폴더에 있는 경로 그대로 사용할 수 있어 직관적이다.

 

 

 

 

 

 

2. src (소스)폴더 내에 이미지 파일을 위치시키고 활용

---

 

1) 정적 활용

 

 

 

소스 폴더(src) 내에 images 폴더를 만들고 이미지 파일을 위치시킨다.

이후 이것을 활용하는 소스코드에서는 이 이미지가 있는 위치까지 상대경로로 올라가야 한다.

 

import React from 'react'
import lesMeImg from '../../images/lesme.jpg'

export default function ImageTrain() {
	return(
    	<div>
        	<img src={lesMeImg}  alt='오류이미지' />
        </div>
    );
}

상대경로는 매우 힘든일이 아닐 수 없다.

 

따라서 위와 같이 활용해야 할 경우에는 craco 설정을 통해 @image로 image경로를 prefix로 지정해 두고 사용하는 것이 편한다. 아래는 craco에 대한 설명이다.

 

[React] 상대경로 지옥에서 벗어나기 (craco)

 

 

2) 동적 활용

 

 

craco로 상대경로 지옥은 벗어나도 위와 같은 방법은 사용하려는 이미지가 많아 질수록 import 지옥에 빠지게 된다.

 

따라서 이미지를 동적으로 많이 활용해야할 때는 require() 함수를 사용하는 것이 좋다.

 

import React from 'react'

export default function ImageTrain() {
	return(
    	<div>
        	<img src={require('../../images/lesme.jpg').default} alt='오류이미지' />
        </div>
    );
}

 

위와 같이 import 없이도 이미지가 있는 경로에 접근할 수 있다.

 

 

주의해야할 점은 뒤에 .default를 꼭 붙여야한다.

require() 함수 자체는 객체를 리턴하기 한다.

 

 

img 태그의 src는 이미지 경로가 있는 string이 필요하기에

.default를 붙여 필요한 값의 형태만 받아야 한다.

 

 

 

3) 귀찮음에도 import? 짱 편한 require()?

 

 

 

import를 사용해서 이미지를 불러오는 경우에는 웹팩 같은 모듈 번들러가 사용하지 않는 이미지나 모듈들을 알아서 빼고 빌드한다.

 

하지만 require()를 사용하는 경우 불필요한 이미지나 모듈을 불러올 수도 있다.

 

성능을 고려하여 잘 사용하면 되겠다.

 

 

 

 

4) CSS Background Image 문법 활용

 

 

이미지를 사용하는 방법 중 <img> 태그를 이용하는 방법도 있지만 CSS 문법 중 backgroundImage를 활용하는 방법도 있다.

 

import React from 'react'
import lesMeImg from '../../images/lesme.jpg'

export default function ImageTrain() {
	<div style={{ width:900, height:500,
                backgroundImage:"url("+lesMeImg+")"}} ></div>
}

위와 같이 import를 활용해서 css문법으로 활용할 수 있다.

 

 

 

 

3. CDN(Contents Delivery Network) 활용

---

보통 규모가 있는 프로젝트라면 이미지 같은 컨텐츠 파일을 관리하고 내려주는 서버(CDN)가 따로 존재할 것이다.

 

이런 구조에서는 이미지 파일이 더 이상 React 프로젝트 내부에 존재하지 않고 url 형태 이미지 경로를 활용해야 한다.

 

간단하게 <img> 태그의 src에 주소만 넣으면 이미지를 불러 올 수 있다.

 

 

import React from 'react'

export default function ImageTrain() {
	<div>
		<img src={'https://cdn.image1.com/kind3/images1'} alt='오류이미지' />
    </div>
}

 

 

CSS 문법 중 backgroundImage를 활용하는 방법도 아래와 같이 url()형태로 활용하면 된다.

 

 

import React from 'react'

export default function ImageTrain() {
	<div>
		<div style={{ width:800, height:500,
                backgroundImage:"url(https://cdn.image1.com/kind3/images1)"}} ></div>
    </div>
}

 

반응형

 

4. SVG 활용 및 SVGO, SVG Viewer

---

SVG(Scalable Vector Graphics)는 확장가능한 벡터 그래픽이다.

픽셀을 이용하여 그림을 그리는 png jpg 파일들과 다르게 벡터를 기반으로 이미지를 표현한다.

 
그러다보니 크기를 조절함에 따라 깨지는 것이 없고, 용량이 작아 웹에서 자주 사용하는 이미지 형식이다.

 

 

리엑트에서 SVG를 사용하는 방법은 이미지 활용 방식과 같은 방법과 조금 다른 방법이 있다.

 

첫번째 방법은 아래와 같이 img 태그에 import한 SVG 파일을 활용하는 것이다.

 

import React from 'react'
import lesMeImg from '../../images/lesme.svg'

export default function ImageTrain() {
	<div>
		<img src={lesMeImg}  alt='오류이미지' />
    </div>
}

 

 

두번째 방법은 SVG를 import할 때 ReactComponent로 받아와 속성을 수정할 수 있도록 하는 방식이다.

 

 

import React from 'react'
import { ReactComponent as lesMeImg } from '../../images/lesme.svg'

export default function ImageTrain() {
	<div>
		<lesMeImg fill="white" />
    </div>
}

 

 

보통 개발 툴로 VSC(Visual Studio Code)를 활용할 것이다.

jpg나 png 등의 이미지 파일은 VSC에서 열어서 확인해 볼 수 있지만 SVG는 기본적으로 소스코드만 확인해 볼 수 있다.

이를 이미지 형태로 확인해 보려면 Extention을 하나 깔면 확인할 수 있다.

 

 

SVG Viewer를 설치하여 SVG의 이미지 형태를 확인하며 사용하자.

 

 

 

 

마지막으로 SVGO라는 도구를 소개한다.

 

SVGO(SVG Optimizer)는 SVG 벡터 그래픽 파일을 최적화하기위한 Nodejs 기반 도구이다.

 

GitHub - svg/svgo: ⚙️ Node.js tool for optimizing SVG files

 

포토샵, 일러스트레이터 등의 다양한 그래픽 디자인 도구에서 출력된 SVG 파일은 우리가 실제 이미지로 활용하려는 소스코드 이외에 불필요한 정보를 가지고 있어 성능을 저해한다.

SVGO는 이것들을 제거해 주는 도구이다.

 

SVG를 많이 만들어서 사용하는 프로젝트라면 이것을 활용해 성능을 올려주는 것이 좋다.

 

아래 명령어로 설치한다.

 

npm install svgo
yarn add svgo

 

이후 모든 svg파일을 한번에 최적화를 진행하는 명령어로 손쉽게 성능을 올려줄 수 있다.

 

svgo *.svg

 

기타 다른 옵션들은 공식 홈페이지를 참고하면 된다.

 

 

 

 

마무리하며

 

정리하다 보니 리엑트에서 이미지를 활용하는 방법이 꽤 많이 있었다.

리엑트 라이브러리 자체가 개발자를 많이 타서 성능이 꽤 왔다갔다 하는 것을 인지한다면 용량이 꽤 큰 이미지에 대한 활용은 매우 중요하다고 생각한다.

활용법들을 잘 알아두고 적재적소에 코드로 구현해야 겠다.