Props

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

사용법 1

const MyComponent = props => {
  return <div>Hello, my name is {props.name}.</div>;
};

export default MyComponent;

import MyComponent from './MyComponent';

const App = () => {
  return <MyComponent name="React" />;
};

export default App;

Hello, my name is React.

---

사용법 2

const MyComponent = props => {
    return <div>Hello, My name is {props.name}.</div>;
}

MyComponent.defaultProps = {
    name: 'React2'
}

export default MyComponent;

Hello, My name is React2.

---

사용법 3

const MyComponent = props => {
    return <div>Hello, My name is {props.children}.</div>;
}

MyComponent.defaultProps = {
    name: 'React3'
}

export default MyComponent;

import MyComponent from './MyComponent';

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

export default App;

Hello, My name is 리액트.

---

사용법 4

위 예제에서는 props 값을 조회할 때마다 props.name, props.children과 같이 'props.'키워드를 앞에 붙여주고 있다.
이를 비구조화 할당 문법을 통해 props 내부 값을 추출 하는 방법을 알아보자.

const MyComponent = props => {
    const { name, children } = props;

    return (
        <div>
            Hello, my name is {name}.<br/>
            children is {children}.
        </div>
    );
};

// 위 코드를 아래처럼 더 줄일 수 있다.
const MyComponent = ({ name, children }) => {    
    return (
        <div>
            Hello, my name is {name}.<br/>
            children is {children}.
        </div>
    );
};

MyComponent.defaultProps = {
    name: 'React4'
};


export default MyComponent;

import './App.css';
import MyComponent from "./MyComponent";


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

export default App;

Hello, my name is React4.

children is 리액트.

---

사용법 5

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

class MyComponent extends Component {
    render() {
        const { name, favoriteNumber, children } = this.props;
        return (
            <div>
                Hello, my name is {name}.<br/>
                children value is {children}.<br/>
                my favorite number is {favoriteNumber}.
            </div>
        );
    }
}

MyComponent.defaultProps = {
    name : 'React6'
};

MyComponent.propTypes = {
    name: PropTypes.string,
    favoriteNumber: PropTypes.number.isRequired
};



// 위 내용을 아래와 같이도 작성 가능하다.
class MyComponent extends Component {

    static defaultProps = {
        name: 'react name'
    };

    static propTypes = {
        name: PropTypes.string,
        favoriteNumber: PropTypes.number.isRequired
    };

    render() {
        const { name, favoriteNumber, children } = this.props;
        return (
            <div>
                Hello, my name is {name}.<br/>
                children value is {children}.<br/>
                my favorite number is {favoriteNumber}.
            </div>
        );
    }
}



export default MyComponent;

import './App.css';
import MyComponent from "./MyComponent";


function App() {
    return <MyComponent name={"1234"} favoriteNumber={6}>리액트</MyComponent>;
}

export default App;

Hello, my name is 1234.

children value is 리액트.

my favorite number is 6.