react props

return 앞에 JS를 사용한 변수의 동적인 값을 return 되는 JSX속에 삽입하려면 중괄호 속에 {값} 처럼 삽입.

 

 

props

매개변수를 여러개 삽입하지 않고 컴포넌트에 function name(props)와 같이 사용하는데

 

(컴포넌트)
<div className='expense-item__price'>
                <div>${props.amount}</div>
</div>


(App.js)
<ExpenseItem
        title={expenses[0].title}
        date={expenses[0].date}
        amount={expenses[0].amount}
></ExpenseItem>

위와같이 렌더링 하는 부분에서 컴포넌트를 부를 때 속성으로 넣어주고

컴포넌트에서 props를 사용해 동적으로 값을 할당한다.