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

 

Props

 

'props'는 properties를 의미한다.

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

 

 

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

 

• props 비구조 할당

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

 

      

      

      

    
    

      <javascript />
    
const {title,name,age,addr,tel,color,done} = props

 

로 입력해주면 된다. 

또한 제일 기본적인 것은

 

      

      

      

    
    

      <javascript />
    
const Test6Sub = (props) => {

 

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

 

 

• propType - 데이터 유형 정의

      

      

      

    
    

      <javascript />
    
Test6Sub.propTypes = {
    name: PropTypes.string.isRequired,
    age: PropTypes.number.isRequired,
    addr:PropTypes.string,
}

 

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

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

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

 

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

 

 

• defaultProps - props의 기본값

      

      

      

    
    

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

export default Test6Sub;

 

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

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

 

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

 

 

Test6.js

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

      

      

      

    
    

      <javascript />
    
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일 수업 🌕