개발자 Lim

상황: 일반적으로 다른 컴포넌트들끼리는 HTML 코드의 결괏값에 접근이 불가능하다.
이를 해결 할 수 있는 방법이 Props다.

Props: 사용자 지정 컴포넌트에 임의로 속성을 추가하여 필요한 데이터를 전달 하는 것

<App.js> 

import ExpenseItem from "./components/ExpenseItem";

function App() {
// 전달 하고자 하는 데이터
  const expenses = [
    {
      id: "e1",
      title: "Toilet Paper",
      amount: 94.12,
      date: new Date(2020, 7, 14),
    }
  ];

  return (
    <div>
    // 전달 될 컴포넌트
      <ExpenseItem
        title={expenses[0].title}
        amount={expenses[0].amount}
        date={expenses[0].date}
      ></ExpenseItem>
    </div>
  );
}

export default App;

<ExpenseItem.js>

import './ExpenseItem.css';

function ExpenseItem(props) {
  return (
    <div className="expense-item">
      <div>{props.date.toISOString()}</div>
      <div className="expense-item__description">
        <h2>{props.title}</h2>
        <div className="expense-item__price">${props.amout}</div>
      </div>
    </div>
  );
}

export default ExpenseItem;

학습 사이트: udemy React 완벽 가이드