[React] props 사용하기 - propType, defaultProps , 비구조 할당

 

Props

 

'props'는 properties를 의미한다.

부모 컨트롤러에서 자식 컨트롤러로 값을 전달할 때 사용한다.

 

 

매개변수에 각각의 변수들을 미리 입력해줌으로써 변수명을 그대로 가져올 수 있다.

 

• props 비구조 할당

매개변수에 각각의 변수명을 넘겨주지만 이를 비구조 할당으로 넘기려면

 

const {title,name,age,addr,tel,color,done} = props

 

로 입력해주면 된다. 

또한 제일 기본적인 것은

 

const Test6Sub = (props) => {

 

의 경우, props.name 또는 props.age처럼 앞에 props로 붙여줘야 한다.

 

 

• propType - 데이터 유형 정의

Test6Sub.propTypes = {
    name: PropTypes.string.isRequired,
    age: PropTypes.number.isRequired,
    addr:PropTypes.string,
}

 

각 변수들에 대해 사용할 데이터 유형을 정의해준다.

string은 문자, number는 숫자, bool은 boolean이다.

isRequired는 필수적으로 값을 입력해야 한다는 의미이다.

 

각각의 값들에 정의를 해줌으로써 부모 컴포넌트에게 받는 정보를 체크할 수 있다.

 

 

• defaultProps - props의 기본값

Test6Sub.defaultProps = {
    name:'이태민',
    age:30,
    addr:'대한민국',
}

export default Test6Sub;

 

defaultProps는 기본 디폴트 값을 설정해준다.

컴포넌트에서 값을 지정하지 않았다면 입력한 기본값이 나오게 된다.

 

마지막으로 해당 폴더를 외부에서 호출하기 위해 export 해준다.

 

 

Test6.js

props로 값을 넘겨주기 위해 입력한 부분이다.

import React from 'react';
import Test6Sub from './Test6Sub';

const Test6 = () => {
    return (
        <Test6Sub
            title = '황민현 정보'
            name = '황민현'
            age = {20}
            addr = '서울'
        />
    );
};

export default Test6;

 

Test6Sub함수를 호출하여 그 안에 각각의 값을 입력해준다.

'황민현'의 경우 모든 값을 다 입력해주었지만

이외에 입력해주지 않은 부분은 props에 defaultProps로 지정해준 기본값이 나오게 될 것이다.

 

 

4월 14일 수업 🌕