React 컴포넌트

 

src/Mycomponent.js 만들기

 

import React from "react";

const MyComponent = () =>{
    return <div>나의 새롭고 멋진 컴포넌트</div>
};
export default MyComponent;

 

모듈 내보기(export)

 

export default MyComponent;

 

모듈 불러오기(import)

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

class App extends Component {
  render() {

    return (
      <div >
            <MyComponent/>
      </div>
    );
  }
}

export default App;

 

 

Props

props는 properties를 줄인 표현 

컴포넌트 속성을 설정할 때 사용하는 요소

props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트

(현 상황에서는 App 컴포넌트가 부모 컴포넌트입니다)에서 설정

 

Jsx 내부에서 props 렌더링

 

MyComponent.js

 

import React from "react";

const MyComponent = props =>{
    return <div>안녕하세요 제 이름 {props.name}입니다.</div>
};
export default MyComponent;

 

App.js

 

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

class App extends Component {
  render() {

    return (
      <div >
        <MyComponent name="React"/>
      </div>
    );
  }
}

export default App;

 

defaultProps

 

import React from "react";

const MyComponent = props =>{
    return <div>안녕하세요 제 이름 {props.name}입니다.</div>
};
MyComponent.defaultProps={
    name:'기본이름'
};
export default MyComponent;

 

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

 

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

 

Mycomponent.js

 

 

import React from "react";

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

 

 

 

 

비구조화 할당 문법

 

구조 분해 문법이라고도 불리며, 함수의 파라미터 부분에서도 사용할 수 있다.

Mycomponent.js

import React from "react";

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

 

Mycomponent.js

 

import React from "react";

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

 

propTypes를 통한 props 검증

 

propTypes를 사용하려면 코드 상단에 import 구문을 사용

 name 값은 무조건 문자열(string) 형태로 전달해야 된다

MyComponent.prototype ={
    name:PropTypes.string
}

 

 

isRequired를 사용하여 필수 propTypes 설정

 

proptypes를 지정하지 않았을때 경고 메시지 띄우기

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

const MyComponent = ({name,favoriteNumber,children}) =>{
    return (
    <div>
        안녕하세요 제 이름 {name}입니다. <br/>
        children 값은 {children} 입니다.
        <br/>
        제가 좋아하는 숫자는 {favoriteNumber}입니다.
    </div>
    )
};
MyComponent.defaultProps={
    name:'기본이름'
};
MyComponent.prototype ={
    name:PropTypes.string,
    favoriteNumber:PropTypes.number.isRequired
}
export default MyComponent;

 

App.js

 

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

class App extends Component {
  render() {

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

export default App;

 

PropTypes 종류

 

array: 배열

arrayOf(다른 PropType): 특정 PropType으로 이루어진 배열을 의미

bool: true 혹은 false 값

func: 함수

number:숫자

object:객체string:문자열symbol: ES6의 Symbolnode:렌더링 할 수 있는 모든 것(숫자, 문자열, 혹은 jsx 코드 children도 node PropType입니다)

instanceOf(클래스): 특정 클래스의 인스턴스

oneOf:주어진 배열 요소 중 값 하나

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

obejctOf(React.PropTypes.number): 객체의 모든 키 값이 인자로 주어진 PropType인 객체

shape({name:PropTypes.string,num:PropTypes.number}):주어진 스키마를 가진 객체any: 아무 종류

 

클래스형 컴포넌트에서 Props 사용하기

 

클래스형 컴포넌트에서 props를 사용할 때는 render 함수에서 this.props를 조회하면 됨.

그리고 defaultProps와 propsTypes는 똑같은 방식

 

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

class MyComponent extends Component {
    static defaultProps ={
            name:'기본 이름'
    };
    static ProTypes = {
        name:ProTypes.string,
        favoriteNumber:ProTypes.number.isRequired
    }
    render() {
        const {name,favoriteNumber,children} = this.props; //비구조화 할당
        return (
            <div>
            안녕하세요 제 이름 {name}입니다. <br/>
            children 값은 {children} 입니다.
            <br/>
            제가 좋아하는 숫자는 {favoriteNumber}입니다.
        </div>
        );
    }
}

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

export default MyComponent;