3.1 React 기초 및 실습: 동적 데이터 출력 (feat. 유데미 React 완벽 가이드)

https://www.udemy.com/course/best-react/

【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript

이 게시물은 유데미 React 완벽 가이드 강의를 보고 메모를 남기는 게시물 입니다.

css는 깃허브 참고 https://github.com/katf101/React-The_Complete_Guide

---

1. 동적으로 데이터 출력하기.

정적인 출력 코드와 동적인 출력 코드 비교

import "./ExpenseItem.css";

const ExpenseItem = () => {
  return (
    <div className="expense-item">
      <div>March 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;

# 정적으로 출력
# ExpenseItem.js

 

동적인 코드는 상수나 변수를 이용하고 JSX 문법에서 중괄호 { } 안에 변수나 상수를 넣어 동적 출력을 하는 웹을 만들 수 있다.

import "./ExpenseItem.css";

const ExpenseItem = () => {
  const expenseDate = new Date(2022, 5, 25);
  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;

# 동적으로 출력
# ExpenseItem.js