리액트의 props

props란?

상위 컴포넌트에서 하위 컴포넌트로 값을 넘길 때 사용된다.

1.prop의 사용방법

<상위(부모)컴포넌트 App.js의 코드>

import React from "react";
import YourName from "./YourName";
class App extends React.Component{
  render(){
     return (
      <div className="App">
        <YourName name="luvrace"/>
      </div>
      )
    }
}
export default App;

name="luvrace"는 상위 컴포넌트에서 하위 컴포넌트로 넘겨주는 prop의 값이다.
*<YourName name="luvrace"/>

<하위(자식) 컴포넌트 YourName.js의 코드>
import React from "react";

class YourName extends React.Component {
  render(){
   return (
          <div>
           hello <b>{this.props.name}</b>!
          </div>
        );
  }
}

export default YourName;

{this.props.name}은 상위 컴포넌트로부터 받은 prop이 적용된다.
hello <b>{this.props.name}</b>!

부모로 prop를 받아 사용하지 않는 경우는 다음과 같이 적용할 수 있다.

방식은 다음과 같이 defaultProps를 지정하는 것이다.

import React from "react";

class YourName extends React.Component {
    static defaultProps = {
        name: 'luvrace'
    }
    render(){
        return (
            <div>
                hello <b>{this.props.name}</b>!
            </div>
        );
    }
}
export default YourName;

위의 코드는 아래의 모습으로도 적용이 가능하다.

export default YourName;

import React from "react";

class YourName extends React.Component {
    render(){
        return (
            <div>
                hello <b>{this.props.name}</b>!
            </div>
        );
    }
}

YourName.defaultProps = {
    name: 'luvraced'
};

export default YourName;