React Component들이 서로 연결되고 반응하기 위해서는 하나의 component 값들을 다른 component로 보내주어야 한다. 하나의 컴포넌트에서 다른 컴포넌트로 넘겨주는 값, 정보(information)를 "props"라고 한다.

Props

• properties의 줄임말로 컴포넌트의 속성값을 의미한다. (=HTML의 attribute)
• 정의한 React 컴포넌트를 사용할 때 parameter로 속성을 받아 사용할 수 있는데, 이 때 props를 쓴다.
• props는 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체이며, 하나의 컴포넌트에 대한 정보를 담고 있다.
• 따라서, .(dot)으로 속성명에 접근가능하고, props.속성명으로 속성 값을 가지고 올 수 있다. this.props
• 또한, props를 통해 부모 컴포넌트로부터 자식 컴포넌트에게 state의 상태값, event handler를 넘겨줄 수 있다.

컴포넌트에 Props 전달

• 컴포넌트에 props를 전달하기 위해서는 컴포넌트에 속성명과 속성값을 준다.
  <MyComponent foo = "bar" />
• 속성값이 string이 아닌 경우, 대괄호({})를 붙여준다.
  <Example MyInfo = {["top", "secret"]} />
<Greeting name="Frarthur" town="Flundon" age={2} haunted={false} />

props 렌더링

• 컴포넌트에 전달한 props를 화면에 보이게 하기 위해서는
  1) props를 받을 component class를 찾고,
  2) 해당 component class의 render 메서드의 return에 this.props.name-of-information를 포함시킨다.

import React from 'react';
import ReactDOM from 'react-dom';

class Greeting extends React.Component {
  render() {
    return <h1>Hi there, {this.props.firstName}</h1>;
  }
}

ReactDOM.render(
  <Greeting firstName='Kayyoung' />, 
  document.getElementById('app')
);

하나의 componet에서 다른 component로 전달

<Greeting /> 컴포넌트를 <App /> 컴포넌트에서 렌더링한다고 가정해보자.
1. 컴포넌트

import React from 'react';
//import ReactDOM from 'react-dom';
  
export class Greeting extends React.Component {
  render() {
    return <h1>Hi there, {this.props.name}!</h1>;
  }
}
// ReactDOM.render(<App />, document.getElementById('app'));

• render page는 이므로, import ReactDOM, ReactDOM.render 문구는 쓰지 않는다. => 실행 페이지에서만 해준다.
• 컴포넌트는 다른 컴포넌트에서 실행되기 때문에, export 해준다.
  1) 전체 컴포넌트 명 class 앞에 'export' 붙여준다.
  2) 마지막 라인에 'export default '컴포넌트명''을 써준다.
  차이는??

2. 컴포넌트 (실행 컴포넌트)

import React from 'react';
import ReactDOM from 'react-dom';
import {Greeting} from './Greeting'; //컴포넌트 받아오기

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>
          Hullo and, "Welcome to The Newzz," "On Line!"
        </h1>
        <Greeting name="kayoung"/>
        <article>
          Latest newzz:  where is my phone?
        </article>
      </div>
    );
  }
}

ReactDOM.render(
  <App />, 
  document.getElementById('app')
);

• 에서 컴포넌트를 받기 위한 준비는 'import'에서 시작된다. 컴포넌트는 {}로 감싼다.
• 컴포넌트 자리에 컴포넌트 이름과 속성, 속성값을 넣어준다.

cf. prop vs props vs this.props

props는 들어온 정보값(passed-in information)을 저장하고 있는 객체의 이름이며,
this.props 는 그 객체 저장소를 뜻한다. 동시에 저장된 정보의 각각을 prop이라고 한다.
즉, props는 두개 이상의 정보값을 담고 있거나, 정보값들을 담고 있는 객체를 뜻할 수 있다.

cf. this.props.name-of-information

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

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

---

이벤트 핸들러(Event handler)

함수 또한 props로 쓸 수 있는데, 자주 사용하는 경우가 바로 event handler 함수를 사용할 때다.
React에서 이벤트 핸들러 메서드는 render 메서드와 같이 컴포넌트 클래스에서 메서드로 작동한다.

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from './Button';

class Talker extends React.Component {
  handleClick() {
    let speech = '';
    for (let i = 0; i < 10000; i++) {
      speech += 'blah ';
    }
    alert(speech);
  }
  
  render() {
    return <Button onClick={this.handleClick} />;
  }
}

ReactDOM.render(
  <Talker />,
  document.getElementById('app')
);

• 이벤트 함수를 component class 안에 넣어준다. (handlleClick())
• render()에 실행할 컴포넌트의 이벤트 속성, prop name을 준다.

cf. Naming convention

• 이벤트 핸들러를 prop으로 사용할 때, 부모 컴포넌트의 2개의 이름을 지어야 한다; 이벤트 핸들러 자체 이름, prop으로 넘겨졌을 때의 이름
  return <Button onClick={this.handleClick} />;
• 이벤트 핸들러 이름: 이벤트 유형에 handle 붙여준다.
  click => handleClick, keypress => handleKeyPress
• prop 이름: on+ 이벤트 타입
  click => onClick, keypress => onKeyPress
  ⚠️ 'onClick'과 같이 이벤트 핸들러와 이름이 같지만 특별한 기능을 하지는 않는다. 단지 속성 이름일 뿐! child component에서 event handler로 'onClick'을 불렀을 때, 이벤트 핸들러로 기능한다.

// Talker.js (부모 컴포넌트) 
// The attribute name onClick
// is just a normal attribute name:
<Button onClick={this.handleClick} />
  
// Button.js (자식 컴포넌트)
// The attribute name onClick
// creates an event listner:
<button onClick={this.props.onClick}>
  Click me!
</button>

defaultProps

컴포넌트 요소에 기본값을 설정하고 싶을 때 defaultProps 프로퍼티를 쓴다.

class Example extends React.Component {
  render() {
  return <h1>{this.props.text}</h1>;
  }
 }

Example.defaultProps = {text: 'yo'};

• defaultProps 프로퍼티는 객체로 셋팅하고자 하는 props를 넣는다.
• 은 요소를 전달하는 것이 아닌 단지 화면에 보여준다(display).
  ⚠️ 모든 컴포넌트에 defaultProps를 설정해 줄 필요는 없지만, 사용자 input값을 받을 때, props의 값이 틀리면 에러가 발생해 화면 구성이 안될 때 default value가 유용하게 사용할 수 있다.