[React] React에서 이미지 추가하기

이전 포스팅에서 검색 조건을 설정하고 그 결과를 반영하는 방법을 다뤘다.

검색 목록을 렌더링하는건 검색 조건을 통해 필터링된 데이터를 맵핑해 구현하면 되기에 그리 어렵지 않았는데 이 과정에서 고민했던 부분이 바로 이미지를 추가하는 것이었다.

 

이미지는 어느 폴더에서 불러와야 할까?

처음엔 import 문을 사용하지 않고 상대경로로 이미지를 불러오고 싶어서 public 폴더에 저장하려 했으나 이렇게 할 경우 이미지 최적화가 실행되지 않는다고 한다.

출처 : 한 입 크기로 잘라 먹는 리액트 12.6) 폰트, 이미지, 레이아웃 설정하기

 

프로젝트를 배포한 뒤 이미지 소스 경로를 확인해보면 assets 폴더 내부에 있는 이미지의 경로가 데이터 URI 형식으로 나타나는 것을 확인할 수 있으며, public 폴더에 있는 이미지와 달리 브라우저에 캐싱되기 때문에 새로고침을 하더라도 다시 불러오지 않는다.

속도가 중요한 웹 서비스에서 불필요한 로딩은 최대한 줄이는 것이 맞다 생각해 이미지는 assets 폴더에 저장하기로 했다.

 

이미지 import 하기

assets 폴더에 있는 이미지를 import하기 위해선 다음과 같이 이미지 경로를 추가하고 img 태그의 소스에 해당 경로를 삽입하면 된다.

import img01 from './assets/img01.jpg';

function App(){
	return (
    	<>
            <img src={img01} alt='이미지01'>
        </>
    );
}

export default App;

 

하지만 추가해야 하는 이미지가 늘어날수록 코드도 길어지고 하나의 이미지를 여러 페이지에서 사용하려 할 때마다 모든 이미지를 import 할 순 없는 노릇이다.

따라서 특정 객체로부터 id값을 파라미터로 받아 해당하는 이미지를 반환해주는 js 파일을 하나 만들어야 한다.

참고로 js 파일은 src 폴더 아래 util 폴더를 생성해서 그 곳에 추가했다.

import img0 from '../assets/common/img01.jpg';
import img1 from '../assets/common/img02.jpg';
import img2 from '../assets/common/img03.jpg';
import img3 from '../assets/common/img04.jpg';
import img4 from '../assets/common/img05.jpg';
import img5 from '../assets/common/img06.jpg';

export function getImage(id){
    switch(id){
        case 0: return img0;
        case 1: return img1;
        case 2: return img2;
        case 3: return img3;
        case 4: return img4;
        case 5: return img5;
        default: return null;
    }
}

import { getImages } from './util/get-images.js';

const exList=[
    {id:0, value:'value00'},
    {id:1, value:'value01'},
    {id:2, value:'value02'}
]

function App(){
	return (
    	<>
            <img src={getImages(0)} alt='이미지'>
            {exList.map((item)=>(<img src={getImages(item.id)} alt='이미지' />))}            
        </>
    );
}

export default App;

 

이렇게 이미지 파일을 반환해주는 js 파일을 사용하면 여러 페이지에서 이미지를 불러올 때 js 파일 하나만 import 해서 파라미터를 전달해주며 이미지를 삽입할 수 있다.