37. JSX에서 동적 데이터 출력 및 표현식 작업하기

 

'

ExpenseItem.js 파일 내에서 하드코딩 되어 있는 값부분들을 유동적으로 바꾸어 재사용 가능하게 하려면 어떻게 해야 할까?

그렇다면 자바스크립트는 언제 사용하는가?

자바스크립트에서 선언한 변수들을

{} 를 이용해서 사용할 수 있다

 

변수를 선언해서 그 값을 바탕으로 데이터를 입력하는 방법을 배웠다

import './ExpenseItem.css';

function ExpenseItem() {

  // data 객체 생성
  const expenseDate = new Date(2023, 7, 1);
  const expenseTitle = 'Car Insurance';
  const expenseAmount = 294.56;

  return (
    <div className="expense-item">
      <div>{expenseDate.toString()}</div>
      <div className="expense-item__description">
        <h2>{expenseTitle}</h2>
        <div className="expense-item__price">{expenseAmount}</div>
      </div>
    </div>
  );
}

export default ExpenseItem;