CSS스타일 추가, Outputting Dynamic Data

css 스타일을 추가해주는 방법은
저번시간에 import export해주는거다.
이렇게 함으로써 리액트에 css를 inject해주는건데
css는 그 자체 파일에서 하는게 아니라
특이하게 자바스크립트 파일에서 해준다고 한다.
js파일에 이렇게 css를 먼저 import 해주고

import './ExpenseItem.css';

그리고 css를 js파일에 있는

function ExpenseItem() {
  return (
    <div>
      <div>Marh 28th 2021</div>
      <div>
        <h2>Car Insurance</h2>
        <div>$294.67</div>
      </div>
    </div>
  );
}

요거에 적용을 해줘야 하는데 여기서 신기한게
내가 알고있는 class="" 이렇게 쓰는게 아니라
className="" 이렇게 쓴다고 한다!

그래서 최종코드는 이렇게 된다.

import "./ExpenseItem.css";

function ExpenseItem() {
  return (
    <div className="expense-item">
      <div>Marh 28th 2021</div>
      <div className="expense-item__description">
        <h2>Car Insurance</h2>
        <div className="expense-item__price">$294.67</div>
      </div>
    </div>
  );
}

export default ExpenseItem;

div에 clasName으로 해서 css 이름을 써줬다!
css적용하는건 나름 쉬운듯!!
다음으로 동적으로 데이터를 출력하는 방법을 배웠다!
리액트 컴포넌트에서는 {}이 아이 사이에 있는 애들을 자바스크립트로
인식한다고 한다. 공부하면서 따라 친 코드는 다음과 같다.

import "./ExpenseItem.css";

function ExpenseItem() {
  const expenseDate = new Date(2021, 2, 28);
  const expenseTitle = "Car Insurance";
  const expenseAmount = 294.67;

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

export default ExpenseItem;

expenseDate는 문자로 표현이 안되니까
toISOString()를 써준것이다!!!
저렇게 {}에 상수 이름을 써주면 상수 variable
이름이 쏙 들어간다ㅎㅎㅎㅎ