📚Props

컴포넌트가 가지는 속성으로 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용한다.

특징

1. 단방향 데이터 흐름 (상위 컴포넌트에서 하위 컴포넌트로 전달되는 데이터)
2. 수정할 수 없는 읽기 전용 데이터

예시 코드

상위 컴포넌트 <App />

import ExpenseItem from "./components/ExpenseItem";

function App() {

  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
        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>
  );
}

export default App;

하위 컴포넌트 <ExpenseItem />

import './ExpenseItem.css';

const 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.amount}</div>
            </div>
        </div>
    );
}

export default ExpenseItem;

해설

상위 APP컴포넌트의 속성 expense를
ExpenseItem 컴포넌트에 props로 전달하고있는 코드입니다.

expense의 각 인덱스의 값인 title, amount, date를
props로 전달해주고 있음 (이름은 마음대로 지을 수 있다)

ExpenseItem에서는 props는 객체 형태로 전달됨
props.title, props.amount, props.date 키워드로 props의 value에 접근가능

props 콘솔창

npm start 화면