props

props : properties를 줄인 표현으로 컴포넌트 속성을 설정시 사용. props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정가능

 

props 값은 컴포넌트 함수의 파라미터로 받아와 사용할 수 있습니다.

import React from "react";

const MyComponent = props => {
  return <div>안녕하세요, 제 이름은 {props.name} </div>;
};

export default MyComponent;

import React from "react";

const MyComponent = props => {
  return <div>안녕하세요, 제 이름은 {props.name} </div>;
};

export default MyComponent;

아래와 같이 default props를 설정 가능

import React from "react";

const MyComponent = props => {
  return <div>안녕하세요, 제 이름은 {props.name} </div>;
};

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

export default MyComponent;

 

children : 컴포넌트 태그 사이의 내용을 보여주는 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을 설정하는 것과 유사하다. propTypes를 사용하기 위해서는 코드 상단에 import 구문을 통해 불러와야 한다.

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;

위와 같이 설정해주면 name값은 반드시 string의 형태로 전달 해야 한다는 것을 의미한다.

 

isRequired를 사용하여 필수 propTypes 설정

propTypes를 지정하지 않았을 때 경고 메시지를 출력하기 위해서 propsTypes를 지정할 때 뒤에 isRequired를 붙여주면 된다.

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

const App = () => {
  return (
    <MyComponent name="React" favoriteNumber={1}>
      리액트
    </MyComponent>
  );
};

export default App;

 

PropTypes 종류

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

 

클래스형 컴포넌트 : render 함수에서 this.props 조회하면 된다.

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;

혹은 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 (
      <div>
        안녕하세요, 제 이름은 {name}입니다.
        <br /> children 값은 {children} 입니다.
        <br />
        제가 좋아하는 숫자는 {favoriteNumber} 입니다.
      </div>
    );
  }
}

export default MyComponent;