[React] 여러 개 이미지를 한 번에 import하기

상황

아이콘을 이미지로 불러오느라고 많은 이미지를 불러와야 하는 상황

import icon1 from "../../assets/icons/theme/icon1.png"
import icon2 from "../../assets/icons/theme/icon2.png"
import icon3 from "../../assets/icons/theme/icon3.png"
import icon4 from "../../assets/icons/theme/icon4.png"
...

하나의 파일에서 사용하는 아이콘이 12개인데, 이렇게 12줄을 추가해야 했다

 

개선

1. 원하는 경로에 index.js 파일을 만들고
2. 그 파일 내에서 모두 import한 후 export
3. 사용할 곳에서 한 번에 import

/assets/icons/index.js
import Icon1 from './theme/icon1.png';
import Icon2 from './theme/icon2.png';
...

export {
    Icon2,
    Icon2,
    ...
};

// 사용할 파일.js
import {
    Icon1,
    Icon2,
    ...
} from "../../assets/icons";

 

• 이렇게 하니까 코드가 깔끔해졌다
• 경로가 바뀌어도 파일을 하나하나 찾아서 수정하지 않아도 되어서 좋았다
• 자동완성이 되어서 맞춤법으로 에러 날 일이 없다

 

---

참고 사이트

• https://stackoverflow.com/questions/44607396/importing-multiple-files-in-react