React Component 불러오기 (props)

MyComponent.js

 

import React, { Component } from 'react';

class MyComponent extends Component {
    render() {
        return (
            <div>
                나의 새롭고 멋진 컴포넌트
            </div>
        );
    }
}

export default MyComponent;

 

 

App.js

import MyComponent from './MyComponent'; 1

 

import React , {Component} from 'react';
import './App.css'
import MyComponent from './MyComponent'; //MyCompopnent 파일 불러옵니다.

class App extends Component{
  render(){



    return(
<MyComponent/>
    )
  }
}

export default App;

 

 

import 를 이용하여 컴포넌트를 불러온다.

 

작동후 모습

 

 

Props

 

MyComponent.js (자식 컴포넌트)

            <div>
                안녕하세요 , 제이름은 {this.props.name} 입니다.
            </div>

 

App.js (부모 컴포넌트)

    return(
<MyComponent name="Petabyte"/>
    )

화면

 

 

defaultProps

 

class MyComponent extends Component {

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

화면

 

 

PropTypes 종류

array : 배열

bool : 참, 거짓

func:함수

number:숫자

object:객체

string:문자열

symbol:ES6 문법의 심벌 개체

node :렌더링 할수 있는 모든것(숫자,문자열,element 또는 이들로 구성된 배열)

element:리액트 요소

instanseOf(myclass): 특정 클래스의 인스턴스

oneOf(['Male','Female']):주어진 배열 요소중 하나

oneOfType([React.PropTypes.string, React.PropTypes.number]):주어진 배열 안의 종류중 하나

arrayOf(React.PropTypes.number):주어진 종류로 구성된 배열

objectOf(React.PropTypes.number):주어진 종류의 값을 가진 객체

shape({name:React.PropTypes.striong, age:React.PropTypes.number}):주어진 스키마를 가진 객체

any:아무 종류

 

사용방법 : PropTypes.bool  또는 PropTypes.any.isRequired 같은 방식으로 사용

 

    constructor(props){
        super(props);
        this.state={
          number:0
        }

constructor 설정시 부모 컴포넌트에서 수정할수 없음.