[React] image 폴더 import 하기

stackoverflow를 보고 정리한 글입니다.

---

리팩토링 중 image를 가져올 때 (1)상대/절대경로를 작성하거나 (2)image 파일을 한 개씩 import하지 않고, 폴더 전체를 import 해서 코드를 작성하고 싶어서 찾아봤다.

1. image 파일 경로 설정

• 처음에는 CRA로 프로젝트를 시작해서 public - images 폴더를 만들어 가져왔었다. 하지만 배포 할 때 public 폴더는 따로 build 해야 하고 폴더 전체를 가져오기 위해서는 src 안에 포함되어 있어야 하기에 image 파일을 src - assets 폴더로 옮겨주었다.

2. require.context()

• require.context는 웹팩이 모듈을 탐색할 때 특정 경로에 존재하는 파일을 탐색하기 위한 함수
• 기준 디렉토리로부터 정규표현식에 해당하는 모든 모듈을 불러올 수 있는 웹팩 컴파일러의 특별한 기능

require.context(
  (directory: String),
  //선택, 기본값 true
  (includeSubdirs: Boolean),
  //선택, 기본값 /^\.\/.*$/, 모든 파일
  (filter: RegExp),
  //선택, 'sync' | 'eager' | 'weak' | 'lazy' | 'lazy-once', 기본값 'sync'
  (mode: String) 
);

require.context(
  directory,
  (useSubdirectories = true),
  (regExp = /^\.\/.*$/),
  (mode = 'sync')
);

3. 적용

• 이미지 경로를 길게 나열하거나 많은 이미지를 가져올 때 전부 import 하지 않고 깔끔하게 가져올 수 있다.

//nav.js

import imageAll from 'assets/ImageAll';

const Nav =() => {
  const images = imageAll(
    require.context('assets/images', true, /\.(png|jpe?g|svg)$/),
  );
  
  return (
  	...
    <img src={images['ic_nav_store.png']} />
  )
  
}

export default Nav;

• styled-component에서 image url로 적용하는 경우에는 변수로 만들어 props로 전달해 주면 된다.

// 변수
const storeIcon = images['ic_nav_store.png'];

// props 전달
<Store storeIcon={storeIcon}>
  
const Store = styled.div`
	...
	background-image: url(${(props) => props.storeIcon})
`