props

props는 properties를 줄인 표현으로 컴포넌트를 설정할 때 사용 하는 요소입니다.
props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있습니다.

JSX 내부에서 props 렌더링

props 값은 컴포넌트 함수의 파라미터로 받아 와서 사용할 수 있습니다.
props를렌더링할대 JSX내부에서 { } 기호로 감싸 주면 됩니다. 

MyComponent.js

import React from 'react';
 
const MyComponent = props => {
return <div>안녕하세요, 제 이름은 {props.name}입니다.</div>;
};
 
export default MyComponent;

App.js

import React from 'react';
import MyComponent from './MyComponent';
 
const App = () => {
  return <MyComponent name="React" />;
};
 
export default App;

출력결과

props 기본값 설정: defaultProps

위 코드 App.js 에서 return <MyComponent />로 name값을 지정하지 않을 경우
"안녕하세요, 제 이름은 입니다." 와 같은 결과가 출력됩니다.

MyComponent.js

import React from 'react';
 
const MyComponent = props => {
  return <div>안녕하세요, 제 이름은 {props.name}입니다.</div>;
};
 
MyComponent.defaultProps = {
  name: '기본 이름'
};
 
export default MyComponent;

위 코드와 같이 MyComponent.js 를 수정하여 기본값을 설정할 경우 다음과 같은 결과가 출력됩니다.

태그 사이의 내용을 보여주는 children

리액트 컴포넌트를 사용할 때 컴포넌트 태그 사이의 내용을 보여주는 props

App.js

import React from 'react';
import MyComponent from './MyComponent';
 
const App = () => {
  return <MyComponent>리액트</MyComponent>;
};
 
export default App;

<MyCompoenent>리액트</MyComponent>;
태그 사이에 작성한 리액트라는 문자열을 보여주려면 props.children값을 보여 주어야 합니다.

MyComponent.js

import React from 'react';
 
const MyComponent = props => {
  return (
    <div>
      안녕하세요, 제 이름은 {props.name}입니다. <br />
      children 값은 {props.children}입니다.
    </div>
  );
};
 
MyComponent.defaultProps = {
  name: '기본 이름'
};
 
export default MyComponent;

비구조화 할당 문법을 통해 props 내부 값 추출하기

porps 값을 조회할 때마다 props. 라는 키워드를 앞에 붙여 주고 있는데 
다음과 같이 ES6의 비구조화 할당 문법을 사용하여 내부 값을 바로 추출할 수 있습니다.

MyComponent.js (비구조화 할당 문법)

import React from 'react';

const MyComponent = props => {
const { name, children } = props;
return (
 <div>
   안녕하세요, 제 이름은 {name}입니다. <br />
   children 값은 {children}
   입니다.
 </div>
);
};

MyComponent.defaultProps = {
name: '기본 이름'
};

export default MyComponent;

MyComponent.js (구조 분해 문법)

import React from 'react';
 
const MyComponent = ({ name, children }) => {
  return (
    <div>
      안녕하세요, 제 이름은 {name}입니다. <br />
      children 값은 {children}
      입니다.
    </div>
  );
};
 
MyComponent.defaultProps = {
  name: '기본 이름'
};
 
export default MyComponent;

함수의 파라미터 부분에서도 사용할 수 있으며,
함수의 파라미터가 객체라면 그 값을 바로 비구조화해서 사용합니다.

propTypes를 통한 props검증

컴포넌트의 필수 props를 지정하거나 props의 타입(type)을 지정할 때는 propTypes를 사용하며, 
지정하는 방법은 defaultProp을 설정하는것과 비슷합니다. 

MyComponent.js

import React from 'react';
import PropTypes from 'prop-types';
 
const MyComponent = ({ name, children }) => {
  return (...);
};
 
MyComponent.defaultProps = {
  name: '기본 이름'
};
 
MyComponent.propTypes = {
  name: PropTypes.string
};
 
export default MyComponent;

위 코드와 같이 설정해 주면 name값음 무조건 문자열(string)형태로 전달해야 된다는 것을 의미합니다.

isRequired를 사용하여 필수 propTypes 설정

isRequired는 propTypes를 지정하지 않았을때 경고 메시지를 띄워줍니다.
설정하는 방법은 propTypes를 지정할 때 뒤에 isRequired를 붙여 주면 됩니다.

MyComponent.js

import React from 'react';
import PropTypes from 'prop-types';
 
const MyComponent = ({ name, favoriteNumber, children }) => {
  return (
    <div>
      안녕하세요, 제 이름은 {name}입니다. <br />
      children 값은 {children}
      입니다.
      <br />
      제가 좋아하는 숫자는 {favoriteNumber}입니다.
    </div>
  );
};
 
MyComponent.defaultProps = {
  name: '기본 이름'
};
 
MyComponent.propTypes = {
  name: PropTypes.string,
  favoriteNumber: PropTypes.number.isRequired
};
 
export default MyComponent;

PropTypes 종류

- array: 배열
- arrayOf: 특정 propType으로 이루어진 배열
- bool: true or false 값
- func: 함수
- number: 숫자
- object: 객체
- string: 문자열
- symbol: ES6의 Symbol
- node: 렌더링할 수 있는 모든 것(숫자, 문자열, JSX코드)
- instanceOf: 특정 클래스의 인스턴스(ex: instanceOf(MyClass))
- oneOf(['dog', 'cat']): 주어진 배열 요소 중 값 하나
- oneOfType([React.PropTypes.string, PropTypes.number]): 주어진 배열 안의 종류 중 하나
- objectOf(React.PropTypes.number): 객체의 모든 키 값이 인자로 주어진 PropType인 객체
- shape({ name: PropTypes.string, num: PropTypes.number }): 주어진 스키마를 가진 객체
- any: 아무 종류

더 자세한 정보는 https://github.com/facebook/prop-types에서 확인할 수 있습니다.

클래스형 컴포넌트에서 props 사용하기

클래스형 컴포넌트에서 props를 사용할 때는 render함수에서 this.props를 조회하면 됩니다.

MyComponent.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
 
class MyComponent extends Component {
  render() {
    const { name, favoriteNumber, children } = this.props; // 비구조화 할당
    return (
      <div>
        안녕하세요, 제 이름은 {name}입니다. <br />
        children 값은 {children}
        입니다.
        <br />
        제가 좋아하는 숫자는 {favoriteNumber}입니다.
      </div>
    );
  }
}
 
MyComponent.defaultProps = {
  name: '기본 이름'
};
 
MyComponent.propTypes = {
  name: PropTypes.string,
  favoriteNumber: PropTypes.number.isRequired
};
 
export default MyComponent;

MyComponent.js(class내부에서 지정하는 방법)

import React, { Component } from 'react';
import PropTypes from 'prop-types';
 
class MyComponent extends Component {
  static defaultProps = {
    name: '기본 이름'
  };
  static propTypes = {
    name: PropTypes.string,
    favoriteNumber: PropTypes.number.isRequired
  };
  render() {
    const { name, favoriteNumber, children } = this.props; // 비구조화 할당
    return (...);
  }
}
 
export default MyComponent;