props

pops(properties)

⚡ 컴포넌트 속성을 설정할 때 사용

⚡ 부모 컴포넌트에서 설정

 

import React from 'react';

const MyComponent = props => {
    return <div>지금 {props.study}를 공부하고 있습니다.</div>;
};

export default MyComponent;

src/MyComponent.js 파일이다.

import React from 'react';
import MyComponent from './MyComponent';

const App = () => {
  return <MyComponent study ="리액트" />
};

export default App;

src/App.js 파일이다.

 

출력 화면을 보면 study 값이 "리액트"로 설정되어 출력된 것을 확인할 수 있다.

 

MyComponent.defaultProps = {
    study: '자바'
};

src/MyComponent.js에 위의 코드를 추가해서 기본값을 설정할 수 있다. 만약 기본값이 설정되어 있지 않고 부모 컴포넌트도 값을 설정되어 있지 않다면 아무것도 나타나지 않는다.

 

import React from 'react';
import MyComponent from './MyComponent';

const App = () => {
  return <MyComponent>리액트</MyComponent>
};

export default App;

src/App.js 파일이다.

 

import React from 'react';

const MyComponent = props => {
    return (
        <div>
            지금 {props.study}를 공부하고 있습니다.<br />
            나중에 {props.children}을 공부할 것입니다.
        </div>
    );
};

MyComponent.defaultProps = {
    study: '자바'
};

export default MyComponent;

src/MyComponent 파일이다.

 

출력 결과이다. 

 

import PropTypes from 'prop-types';

MyComponent.propTypes = {
    study: PropTypes.string
};

propTypes를 통해서 props의 타입을 지정할 수 있다. 위의 코드는 study는 무조건 문자열 형태로 전달되어야 한다는 것을 의미한다.

 

만약 study에 숫자값이 들어가도 페이지는 실행이 된다. 하지만 콘솔창에는 경고가 표시된다.

 

isRequired를 사용하여 필수 propTypes를 설정할 수 있다.

propTypes를 지정하지 않았을 때 경고 메시지를 띄워준다.

 

이런식으로 지정이 필요하다고 알려준다.

 

github에서 prop-types의 다른 타입에 대한 내용을 확인할 수 있다.

 

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

class MyComponent extends Component {
  render() {
    const {study, day, children} = this.props;
    return (
      <div>
        지금 {study} 공부하고 있다.
        <br />
        {day}일 뒤에는 {children} 공부할 것이다.
      </div>
    );
  }
}


MyComponent.defaultProps = {
  study: "자바",
};

MyComponent.propTypes = {
    study: PropTypes.string,
    day: PropTypes.number.isRequired
};

export default MyComponent;

클래스형 컴포넌트에서 props를 사용할 대는 render 함수에서 this.prop를 통하여 조회할 수 있다.

 

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

class MyComponent extends Component {
  static defaultProps = {
    study: "자바",
  };
  static propTypes = {
    study: PropTypes.string,
    day: PropTypes.number.isRequired
  };
  render() {
    const {study, day, children} = this.props;
    return (
      <div>
        지금 {study} 공부하고 있다.
        <br />
        {day}일 뒤에는 {children} 공부할 것이다.
      </div>
    );
  }
}

export default MyComponent;

클래스형 컴포넌트에서 defaultProps와 propTypes를 설정할 때 class 내부에서 지정할 수도 있다.