컴포넌트에 데이터를 전달하는 프로퍼티(props)

프로퍼티는 상위 컴포넌트가 하위컴포넌트에 값을 전달할때 사용한다. 이때 프로퍼티값은 수정할수 없다는 특징이 있다.

App.js

import React, {Component} from 'react';
import TodaysPlan from "./TodaysPlan";
import MyComponent from "./MyComponent";

class App extends Component {
    render() {
        return (
            <div>
                <img src="http://www.easyspub.co.kr/images/logo_footer.png"/>
                <div>안녕하세요.</div>
                <TodaysPlan />
                <MyComponent name="메세지" /> // name="메세지" 형석으로 props를 전달할수있다.
            </div>
        );
    }
}

export default App;

MyComponent.js

import React from 'react';

class MyComponent extends React.Component {
    render() {
        const name = this.props.name;
        return (
            <div>
                <span>{name}</span>
            </div>
        )
    }
}

export default MyComponent;

위코드를 보면 App컴포넌트가 MyComponent컴포넌트를 포함하고 있으며 프로퍼티는 App > MyComponent로 전달되고 있고 단방향으로 데이터가 흐른다고 표현한다.

함수형 컴포넌트에서 프로퍼티(props)전달

함수형 리액트에서는 컴포넌트 작성과 프로퍼티 전달을 보다 쉽게 작성할수있다.

App.js

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <Hello name="react" color="red"/>
  );
}

export default App;

Hello.js

import React from 'react';

function Hello(props) {
  return <div>안녕하세요 {props.name}</div>
}

export default Hello;

App.js 에서 전달한 name과 color 프로퍼티를 Hello.js컴포넌트에서 받아 출력할수가 있다. 이때 부모->자식 컴포넌트방향의 단방향이며 프로퍼티는 수정할수 없다.