리액트 동적 이미지 적용하기

리액트의 경우 이미지를 부르는 방법이 좀 까다롭다. 조금만 삐끗하면 빨간줄 에러가 주구장창 뜬다. 

//미세먼지 아이콘 동적 변경 
export const airGradeImg = (str) => {
    let result = ""
    switch (str){
        case "좋음" :
            result = require(`../image/weather-dust_1.png`).default;
            break;
        case "보통" :
            result = require(`../image/weather-dust_2.png`).default;
            break;
        case "나쁨" :
            result = require(`../image/weather-dust_3.png`).default;
            break;
        case "매우나쁨" :
            result = require(`../image/weather-dust_4.png`).default;
            break;
    }
    return result
}

다음과 같이 require(`../image/weather-dust_4.png`).default; 로 해야 한다. 

이미지 경로만 동적으로 바꿔주면 안되었다.