코드 중에 질문이 있어요 ..

아래 코드에서 ${emotion} 으로 쓰는것과 그냥 {strDate}랑 하나는 $를 쓰고 하나는 안쓰는거같은데 이거 어떨떄 차이가 나는지좀 알수있을까요??

import { useEffect, useState, useContext } from "react";
import MyButton from "./MyButton";
import { useNavigate } from "react-router-dom";

const DiaryItem = ({ id, emotion, content, date }) => {
 
  console.log(process.env.PUBLIC_URL + `/assets/emotion${emotion}.png`);
  const strDate = new Date(parseInt(date)).toLocaleDateString();
  const goDetail = () => {
    Navigate(`/diary${id}`);
  };

  const goEdit = () => {
    Navigate(`/edit${id}`);
  };

  return (
    <div className="DiaryItem">
      <div
        onClick={goDetail}
        className={[
          "emotion_img_wrapper",
          `emotion_img_wrapper_${emotion}`,
        ].join(" ")}
      >
        <img src={process.env.PUBLIC_URL + `assets/emotion${emotion}.png`} />
      </div>
      <div className="info_wrapper">
        <div className="diary_date">{strDate}</div>
        <div className="diary_content_preview">${content.slice(0, 25)}</div>
      </div>
      <div className="btn_wrapper">
        <MyButton onClick={goEdit} text={"수정하기"} />
      </div>
    </div>
  );
};

export default DiaryItem;

  const goDetail = () => {
    Navigate(`/diary${id}`);
    // id의 값이 삽입 됨 -> `/diary/1` 
  };

<div className="diary_date">{strDate}</div>
// strDate의 값이 화면에 렌더링 됩