props를 통해 데이터 전달하기

App.js의 데이터를 props를 이용해 ExpenseItem 컴포넌트에 전달한다. props를 사용함으로써 컴포넌트의 재사용성을 높일 수 있다.
Yoonyesol · Aug 28, 2023 · 6587446 · 6587446 · Yoonyesol · Aug 28, 2023
1 parent 51bfbf0
commit 6587446
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 5 deletions.
diff --git a/src/App.js b/src/App.js
@@ -1,10 +1,55 @@
 import ExpenseItem from "./components/ExpenseItem";
 
 function App() {
+  const expenseDate = new Date(2023, 8, 28);
+  const expenseTitle = "Car Insurance";
+  const expenseAmount = 500000;
+
+  const expenses = [
+    {
+      id: "e1",
+      title: "Toilet Paper",
+      amount: 94.12,
+      date: new Date(2020, 7, 14),
+    },
+    { id: "e2", title: "New TV", amount: 799.49, date: new Date(2021, 2, 12) },
+    {
+      id: "e3",
+      title: "Car Insurance",
+      amount: 294.67,
+      date: new Date(2021, 2, 28),
+    },
+    {
+      id: "e4",
+      title: "New Desk (Wooden)",
+      amount: 450,
+      date: new Date(2021, 5, 12),
+    },
+  ];
+
   return (
     <div>
       <h2>Let's get started!</h2>
-      <ExpenseItem/>
+      <ExpenseItem
+        title={expenses[0].title}
+        amount={expenses[0].amount}
+        date={expenses[0].date}
+      />
+      <ExpenseItem
+        title={expenses[1].title}
+        amount={expenses[1].amount}
+        date={expenses[1].date}
+      />
+      <ExpenseItem
+        title={expenses[2].title}
+        amount={expenses[2].amount}
+        date={expenses[2].date}
+      />
+      <ExpenseItem
+        title={expenses[3].title}
+        amount={expenses[3].amount}
+        date={expenses[3].date}
+      />
     </div>
   );
 }

diff --git a/src/components/ExpenseItem.js b/src/components/ExpenseItem.js
@@ -1,12 +1,12 @@
 import "./ExpenseItem.css";
 
-function ExpenseItem() {
+function ExpenseItem(props) {
   return (
     <div className="expense-item">
-      <div>2023-08-28</div>
+      <div>{props.date.toISOString()}</div>
       <div className="expense-item__description">
-        <h2>Car Insurance</h2>
-        <div className="expense-item__price">500,000원</div>
+        <h2>{props.title}</h2>
+        <div className="expense-item__price">${props.amount}</div>
       </div>
     </div>
   );