[REACT] PROPS

 

props (properties) : 컴포넌트 속성을 설정할 때 사용

- 부모 컴포넌트가 자식 컴포넌트에 주는 값

- 값을 받아오기만 할 뿐, 수정 불가

 

- MyComponent.js

import React, {Component} from 'react';

class MyComponent extends Component {
    render(){
        return (
            <div>
                안녕하세요 제 이름은 {this.props.name} 입니다.
            </div>
        )
    }
}

 export default MyComponent;

 

- App.js

import React, { Component } from 'react';
import MyComponent from './MyComponent';

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

export default App;

 

defaultProps : props 값을 지정하지 않았을 때 기본 값으로 설정

- MyComponent.js

import React, { Component } from 'react';

class MyComponent extends Component {
    static defaultProps = {
        name: '기본 이름'
    }
    render() {
        return (
            <div>
                안녕하세요 제 이름은 {this.props.name} 입니다.
            </div>
        )
    }
}

export default MyComponent;

 

propTypes : 컴포넌트의 필소 props를 지정하거나 props 타입을 지정

- MyComponent.js

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

class MyComponent extends Component {
    static defaultProps = {
        name: '기본 이름'
    }

    static propTypes = {
        name : PropTypes.string, //name props 타입을 문자열로 설정
        age : PropTypes.number.isRequired //필수적으로 존재, 숫자
    }

    render() {
        return (
            <div>
                안녕하세요 제 이름은 {this.props.name} 입니다.
                저는 {this.props.age}살 입니다.
            </div>
        )
    }
}

export default MyComponent;

 

- App.js

import React, { Component } from 'react';
import MyComponent from './MyComponent';

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

export default App;

 

- propTypes 종류

array	배열
bool	참, 거짓
func	함수
number	숫자
object	객체
string	문자열
any	아무 종류
symbol	ES6 문법의 심벌 개체
node	랜더릴 가능한 모든 것 (숫자, 문자열, element 등)
instanceOf( )	특정 클래스의 인스턴스
oneOf([ ])	주어진 배열 요소 중 값 하나
oneOfType([ ])	주어진 배열 안의 종류 중 하나
arrayOf( )	주어진 종류로 구성된 배열
objectOf( )	주어진 종류의 값을 가진 객체
shape({ })	주어진 스키마를 가진 객체