react 정적파일 설정

import './App.css';

import { Route,Routes,Link,useNavigate } from 'react-router-dom';

//js에서 이미지를 불러올수있는 함수를 만들어 모듈화 해줌 import함
import { getEmotionImage } from './util/get-emotion-image';
...
 return (
  <>
  //img태그에 src에 함수를 호출해
   <div>
    <img  src={getEmotionImage(1)}/>  
    <img  src={getEmotionImage(2)}/>  
    <img  src={getEmotionImage(3)}/>  
    <img  src={getEmotionImage(4)}/> 
    <img  src={getEmotionImage(5)}/>  
   </div>
...
<Routes>
    <Route path="/" element={<Home />} />
    <Route path="/new" element={<New />} />
    <Route path="/diary/:id" element={<Diary />} />
    <Route path="*" element={<NotFound />} />
   </Routes>
  </>
 )
}


export default App

//이미지들을 경로에 맞춰서 잘 설정해 주고
import emotion1 from "./../assets/emotion1.png";

import emotion2 from "./../assets/emotion2.png";

import emotion3 from "./../assets/emotion3.png";

import emotion4 from "./../assets/emotion4.png";

import emotion5 from "./../assets/emotion5.png";  

//함수를 호출하면 이미지를 불러올수있게 함수를 설정해준다.
export function getEmotionImage(emotionId){
  switch (emotionId){
    case 1:
      return emotion1;
    case 2:
      return emotion2;
    case 3:
      return emotion3;
    case 4:
      return emotion4;
    case 5:
      return emotion5;
    default:
      return null;
  }
}