리액트 Props

컴포넌트에 데이터를 전달하는 데이터를 prop이라고 한다. (Properties의 줄임말)

Props

단일 값 전달하기

컴포넌트 작성 시 해당 컴포넌트 태그에 변수이름={}으로 사용한다.

 1//App.js (최상위 컴포너트)
 2 const today = function () {
 3    return new Date().toISOString();
 4 };
 5
 6 function App() {
 7    return (
 8        <div className="App">
 9            <AppHeader />
10            <header className="App-header">
11                <h2>{myName}</h2>
12                <Time init={today} />
13            </header>
14            <AppFooter />
15        </div>
16    );
17}

전달받는 컴포넌트 (자식 컴포넌트)에서는 매개변수로 받아올 수 있는데 객체 타입으로 전달 받는다.

1 function Time(props) {
2    return (
3        <div>
4            <h2>What Time?</h2>
5            <p>{props.today}</p>
6        </div>
7    );
8 }

구조 분해 할당을 통해 더욱 쉽게 받을 수 있다.

객체나 배열 구문에서 속성을 바로 해체해서 변수처럼 사용할 수 있는 표현식이다.

 1//Time.js (자식 컴포넌트)
 2 import React from 'react';
 3
 4 function Time({ today }) {
 5    return (
 6        <div>
 7            <h2>What Time?</h2>
 8            <p>{today}</p>
 9        </div>
10    );
11 }
12
13 export default Time;