[React] 저장된 이미지들을 한번에 나열(보간법 사용)

이번에 해볼 것은 저장된 이미지들을 한번에 나열해볼 건데요 !

각 이미지들은 public>assets안에 저장되어 있습니다. 각 이름은 emotion1, emotion2...emotion5입니다.

6 : class명으로 모든 이미지에 공통 class로 emotion_img_wrapper

7 : 각 이미지별로 다른 class로 `emotion_img_wrapper_${emotion}`를 주었습니다.

8 : 두 class명을 [리스트] 안에 넣어 .join(" ")로 묶어 띄어쓰기 간격으로 합쳐주었습니다.

10 : process.env.PUBLIC_URL은 public의 절대주소이며, ``안에 ${ }보간법을 사용하여 각 이미지별 이미지명을 나타냈습니다.

const DiaryItem = ({ id, emotion, content, date }) => {
  return (
    <div className="DiaryItem">
      <div
        className={[
          "emotion_img_wrapper",
          `emotion_img_wrapper_${emotion}`,
        ].join(" ")}
      >
        <img src={process.env.PUBLIC_URL + `assets/emotion${emotion}.png`} />
        {/* public Directory의 절대주소 */}
      </div>
      <div className="content"></div>
      <div></div>
    </div>
  );
};

export default DiaryItem;