props란?

Props란? properties 의 줄임말로써 컴포넌트에게 전달되는 props 는 파라미터를 통하여 조회 할 수 있습니다.

props 는 객체 형태로 전달됩니다. 

import React from 'react';

import Expenses from './components/Expenses/Expenses';


const 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>
            <Expenses items={expenses} />
        </div>
    );
}

export default App;

위와 같이 Expenses에 const expenses의 데이터를 넣어주고 싶으면 위의 방식과 같이 넘겨 주면 된다 . 

 

import React from 'react';

import ExpenseItem from './ExpenseItem';
import Card from '../UI/Card';
import './Expenses.css';

function Expenses (props) {
console.log()
    return (
            <Card className="expenses">
                <ExpenseItem
                    title={props.items[0].title}
                    amount={props.items[0].amount}
                    date={props.items[0].date}
                />
            <ExpenseItem
                title ={props.items[1].title}
                amount={props.items[1].amount}
                date ={props.items[1].date}/>
            <ExpenseItem
                title ={props.items[2].title}
                amount={props.items[2].amount}
                date ={props.items[2].date}/>
            <ExpenseItem
                title ={props.items[3].title}
                amount= {props.items[3].amount}
                date = {props.items[3].date}/>

            </Card>
    )
}

export default Expenses;

Expenses에서는 위와 같이 받아서 props를 사용해주면 된다 . 

 

 

https://react.vlpt.us/basic/05-props.html

5. props 를 통해 컴포넌트에게 값 전달하기 · GitBook