react - 컴포넌트

- 컴포넌트 -> 함수형 컴포넌트, 클래스형 컴포넌트

function 이름 () {

    return <>;

}

const 이름 = ()=>{

    return <>;

}

class 이름 extends Component {

    render() {

        return()

    }

}

* props -> properties를 줄인 표현, 컴포넌트 속성

자식 컴포넌트를 사용하는 부모 컴포넌트에서 설정해서 자식 컴포넌트에게 전달

 

const App = () => {
    return

        <div>

            <MyComponent name="green" age="20">

                <h3>여기는 children 자리입니다.</h3>

            </MyComponent>

        </div>

}

const MyComponent = ({ name, age, children }) => {

    return <div>

        제 이름은 {name}입니다.

        제 나이는 {age}입니다.

        {children}

    </div>

}

MyComponent.defaultProps = {

    name: '기본이름',

    age: '20',

}

import PropTypes from 'prop-types';

MyComponent.propType = {

    name: PropType.string,

}

class MyComponent extends Component {

    const { name, age, children } = this.props;

    render(

        return()

    )

}