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

[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

12.8) 일기 관리 기능 구현하기 1

해결된 질문

작성

221

아래 코드에서 ${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;

javascript react node.js

답변 2

이정환 Winterlood

지식공유자

안녕하세요 이정환입니다.

문의 주신 코드의 아래 부분 처럼 ${emotion} 같은 문법은
문자열 사이에 변수 값을 집어넣는 문법인 '템플릿 리터럴 문법입니다'

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

또 아래 부분 처럼 {emotion} 같은 문법은
JSX의 문법으로 HTML 태그 속에 자바스크립트 값(표현식)을 삽입하는 문법입니다.

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

따라서 둘은 다른 목적을 갖고 있습니다.
헷갈리지 않으시려면 문자열 사이에 변수의 값을 삽입할 때에는 ${변수_이름}
JSX를 통해 HTML 태그 안에 변수의 값을 삽입할 때에는 {변수_이름}과 같이 사용한다고 기억하시면 됩니다.

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴이에요.
위 코드에서 ${emotion}과 {strDate}를 사용하는 방법은 JavaScript의 템플릿 리터럴 문법을 이용한 것입니다.

${emotion}은 emotion라는 변수를 문자열 안에 삽입하기 위해 사용하는 템플릿 리터럴 문법입니다. ${} 안에 변수나 표현식을 넣을 수 있고, 해당 부분은 실제 값으로 대체됩니다.

{strDate}는 strDate라는 변수를 중괄호로 감싸서 사용한 것입니다. 이 부분은 JSX 문법에서 변수나 표현식을 사용할 때, 중괄호로 감싸야 합니다. 중괄호 안에는 JavaScript 코드를 넣을 수 있습니다.

따라서 ${emotion}은 emotion 변수의 값으로 대체되는 문자열로 사용되고, {strDate}는 strDate 변수의 값으로 대체되는 값으로 사용됩니다. 예를 들어 emotion 변수가 “happy”라면 ${emotion}은 “happy”로 대체되어 “emotionhappy.png”라는 문자열로 사용될 것이고, {strDate}는 strDate 변수의 값에 따라 변동될 것입니다.

이렇게 사용하는 이유는 변수 값을 동적으로 넣을 수 있고, 가독성도 더 좋아져서 코드 작성이 편리합니다.
요청하신 내용에 대한 답변이 되었는지요. 추가로 궁금한 사항이 있으면 언제든지 물어보세요!

인프런 커뮤니티 질문&답변

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