props

props

props는 properties의 줄인 표현, 컴포넌트 속성을 설정할 때 사용하는 요소. props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다.

JSX 내부에서 props 렌더링

import React from 'react';

const MyComponent = (props) => {
  return <div>안녕하세요. 저는 {props.name} 입니다.</div>;
};

export default MyComponent;

컴포넌트를 사용할 때 props 값 지정

import MyComponent from './MyComponent';

class App extends Component {
  render() {
    return <MyComponent name="react" />;
  }
}

export default App;

props 기본값 설정: defaultProps

import React from 'react';

const MyComponent = (props) => {
  return <div>안녕하세요. 저는 {props.name} 입니다.</div>;
};
MyComponent.defaultProps = {
  name: '기본 이름',
};

export default MyComponent;

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

리액트 컴포넌트를 사용할 때 컴포넌트 태그 사이의 내용을 보여주는 props가 있다. children이라 한다

App.js

import MyComponent from './MyComponent';

class App extends Component {
  render() {
    return <MyComponent>리액트</MyComponent>;
  }
}

export default App;

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 내부 값 추출

import React from 'react';

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

export default MyComponent;

객체에서 값을 추출하는 문법을 비구조화 할당이라고 한다. 구조 분해 문법이라고도 한다.

함수의 파라미터 부분에서도 사용할 수 있다.

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의 타입을 지정할 때는 propTypes를 사용한다. 컴포넌트의 propTypes를 지정하는 방법은 defaultProp을 설정하는 것과 비슷하다.

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

const MyComponent = ({ name, children }) => {
  return (
    <div>
      안녕하세요. 저는 {name} 입니다. <br />
      children 값은 {children} 입니다.
    </div>
  );
};
MyComponent.defaultProps = {
  name: '기본 이름',
};
MyComponent.propTypes = {
  name: PropTypes.string
};

export default MyComponent;

propTypes를 설정해주면 name 값은 반듯이 string 형태로 전달해야 한다.

isRequired를 사용하여 필수 propTypes 설정

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

const MyComponent = ({ name, num, children }) => {
  return (
    <div>
      안녕하세요. 저는 {name} 입니다. <br />
      children 값은 {children} 입니다. <br />
      숫자는 {num} 입니다.
    </div>
  );
};
MyComponent.defaultProps = {
  name: '기본 이름',
};
MyComponent.propTypes = {
  name: PropTypes.string,
  num: PropTypes.number.isRequired,
};

export default MyComponent;

PropTypes 종류

• array: 배열
• arrayOf(다른 PropType): 특정 PropType으로 이루어진 배열을 의미 ex)arrayOf(PropTypes.number)는 숫자로 이루어진 배열
• bool: true or false
• func: 함수
• number: 숫자
• object: 객체
• string: 문자열
• symbol: ES6의 Symbol
• node: 렌더링할 수 있는 모든 것
• 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: 아무 종류

GitHub - facebook/prop-types: Runtime type checking for React props and similar objects

GitHub - facebook/prop-types: Runtime type checking for React props and similar objects

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

import { Component } from 'react';
import PropTypes from 'prop-types';

class MyComponent extends Component {
  render() {
    const { name, num, children } = this.props;
    return (
      <div>
        안녕하세요. 저는 {name} 입니다. <br />
        children 값은 {children} 입니다. <br />
        숫자는 {num} 입니다.
      </div>
    );
  }
}
MyComponent.defaultProps = {
  name: '기본 이름',
};
MyComponent.propTypes = {
  name: PropTypes.string,
  num: PropTypes.number.isRequired,
};

export default MyComponent;

class 내부에서 defaultProps와 propTypes 지정

import { Component } from 'react';
import PropTypes from 'prop-types';

class MyComponent extends Component {
  static defaultProps = {
    name: '기본 이름',
  };
  static propTypes = {
    name: PropTypes.string,
    num: PropTypes.number.isRequired,
  };
  render() {
    const { name, num, children } = this.props;
    return (
      <div>
        안녕하세요. 저는 {name} 입니다. <br />
        children 값은 {children} 입니다. <br />
        숫자는 {num} 입니다.
      </div>
    );
  }
}

export default MyComponent;