props란 무엇일까?

props의 어원은 속성(properties)이라는 뜻이다.
단어의 뜻을 리액트로 해석을 해보면 컴포넌트의 속성값이다.

어디서 쓰일까?

props는 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체다.
props를 통해 부모 컴포넌트로부터 자식 컴포넌트에게 state의 상태값, event handler를 넘겨줄 수 있다.

즉 props 는 부모 컴포넌트가 자식 컴포넌트에게 주는 값이다. 자식 컴포넌트에서는 props 를 받아오기만하고, 받아온 props 를 직접 수정 할 수 는 없다.

1.Props 객체

props는 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체라고 했다.

Parent.js는 부모 컴포넌트,Child.js는 자식 컴포넌트로 예시를 두고 설명을 하고자 한다.

// Parent.js

import React from 'react';
import Child from '../pages/Child/Child';

class Parent extends React.Component {
  constructor() {
    super();
    this.state = {
      color: 'red'
    };
  }

  render() {
    return (
      <div>
        <h1>Parent Component</h1>
	<Child />
      </div>
    );
  }
}

export default State;

부모 컴포넌트 안에서 <Child/> 컴포넌트를 import 후 <h1> 태그 아래에 위치해주었다.
부모의 state에 있는 데이터를 <Child /> 컴포넌트에게 props를 통해 넘겨보도록 해보자.

2. 자식컴포넌트에게 전달하기

<Child />를 이렇게 바꿔보자

<Child titleColor={this.state.color}/>

자식 컴포넌트의 props 로 titleColor 속성을 생성해주었다. 속성명은 임의로 마음대로 지을 수 있다.
titleColor의 값으로 this.state.color, 즉 부모 컴포넌트의 state 객체 중 color 값을 전달해주었다.

이러한 방식으로 props를 통해 부모 컴포넌트 내부의 state 값을 자식 컴포넌트에게 전달할 수 있다.

3. 부모컴포넌트에게 받아오기

부모 컴포넌트가 데이터를 전달했으니 자식컴포넌트로 가서 데이터를 받아보자.

// Child.js

import React from 'react';

class Child extends React.Component {
  render() {

    return (
      <div>
        <h1 style={{color : this.props.titleColor}}>Child Component</h1>
      </div>
    );
  }
}

export default State;

<Child /> 컴포넌트 내부에 <h1> 태그가 있다.
해당 태그의 글자 색상을 부모 컴포넌트의 state 로부터 전달 받은 데이터를 지정해주도록 한다.

<h1 style={{color : this.props.titleColor}}>Child Component</h1>

// this : 해당 컴포넌트
// this.props : 해당 컴포넌트의 props 객체
// this.props.titleColor : props 객체의 특정 key(titleColor)값. 즉 "red"

컴포넌트 내부에서 부모 컴포넌트로부터 전달받은 props 데이터를 사용하기 위해서는 state 객체에 접근하는 것과 마찬가지로 props 객체의 특정 키값, 즉 this.props.titleColor 이렇게 작성해주면 된다.