React Prop

1. 개요

React의 Props는 Properties를 줄인 용어로 컴포넌트의 속성을 의미합니다.

props는 부모 컴포넌트에서 자식 컴포넌트를 선언할 때 지정하고, 자식컴포넌트에서는 props 변수를 사용할 수 있습니다.

부모컴포넌트에서는 자식컴포넌트를 명시할 때 속성을 지정할 수 있는데 이는 값이 될 수도 있고 함수가 될 수도 있습니다.

또한 자식컴포넌트의 자식을 명시해서 전달할 수 있습니다.(자식 컴포넌트에서 사용하지 않으면 의미가 없습니다.)

자식 컴포넌트에서는 부모에서 prop을 전달하지 않았을 때 사용할 기본 속성값을 지정할 수 있고, PropTypes를 통해 props의 타입이나 필수 속성여부를 지정할 수도 있습니다.

props의 이름은 일부 미리 정의된 이름(children)을 제외하고 자식 컴포넌트에서 정의할 수 있습니다.

Component.defaultProps를 통해 속성의 기본 값을 지정할 수 있고, Component.propTypes를 통해 속성의 형태나 필수여부를 명시할 수 있습니다.

2. PropTypes

종류	설명
array	배열
arrayOf(X)	X로 이루어진 배열
bool	boolean
func	함수
number	숫자
object	객체
string	문자열
symbol	ES6 symbol
node	자체적으로 렌더링 가능한 모든 것
instanceOf(X)	X 클래스의 인스턴스
oneOf([x, y])	x, y 중 하나(배열의 값 중 하나)
oneOfType([X, Y])	X, Y타입 중 하나(배열의 타입 중 하나의 타입)
objectOf(X)	객체의 모든 키 값이 X와 같은 타입으로 이루어진 객체
shape({x: X, y: Y})	지정된 객체의 모양을 가진 객체
any	무엇이든 상관없음

3. 예시

ChildComponent.js(함수형 컴포넌트)

import React from "react";
import PropTypes from "prop-types";

const ChildComponent = (props) => {

  return (
    <React.Fragment>
      <div onClick={props.handleClick}>Child Component: {props.description}</div>
      <div>I'm {props.name}!</div>
      <div>
        <span>children: </span>
        {props.children}
      </div>
    </React.Fragment>
  )
};

ChildComponent.defaultProps = {
  name: "ChildComponent"
};

ChildComponent.propTypes = {
  description: PropTypes.string,
  handleClick: PropTypes.func.isRequired
};

export default ChildComponent;

 

ChildComponent.js(클래스형 컴포넌트)

import React from "react";
import PropTypes from "prop-types";

class ChildComponent extends React.Component {
  render() {
    const {description, name, children, handleClick} = this.props;

    return (
      <React.Fragment>
        <div onClick={handleClick}>Child Component: {description}</div>
        <div>I'm {name}!</div>
        <div>
          <span>children: </span>
          {children}
        </div>
      </React.Fragment>
    )
  }
}

ChildComponent.defaultProps = {
  name: "ChildComponent"
};

ChildComponent.propTypes = {
  description: PropTypes.string,
  handleClick: PropTypes.func.isRequired
};

export default ChildComponent;

 

App.js

import React from 'react';
import './App.css';
import ChildComponent from "./ChildComponent";

const App = () => {
  const handleChildClick = () => {
    console.log('click child component!');
  };

  return (
    <React.Fragment>
      <div>Hello react!</div>
      <ChildComponent
        description="This is child component!"
        handleClick={handleChildClick}>
        <div>this is children.</div>
      </ChildComponent>
    </React.Fragment>
  )
};

export default App;