[React] 04. React props 사용하기

# props

props는 properties의 줄임말로 컴포넌트의 속성을 설정할 때 사용합니다. 

props를 설정하는 방법은 여러 가지가 있는데 먼저 JSX 코드 내부에서 설정하는 방법은 아래와 같습니다. 사용방법은 자바스크립트 표현식과 동일하게 {}를 사용하여 설정해줄 수 있어요!

const Introduce = (props) => {
    return (
        <div>
            <h1>안녕하세요!</h1>
            <p>{props.name}의 블로그입니다.</p>
        </div>
    );
}

 

다음은 비구조할당을 이용하여 props를 설정해주는 방법입니다.

const Introduce = (props) => {
    const {name, major} = props;
    return (
        <div>
            <h1>안녕하세요!</h1>
            <p>이름은 {name}이고, 전공은 {major}입니다.</p>
        </div>
    );
}

 

또한, 다음과 같이 컴포넌트 속성에 설정해주는 방법이 있습니다. 아래와 같은 Introduce라는 이름의 컴포넌트에 직접 name값을 속성으로 설정해 줄 수 있습니다.

ReactDOM.render(
    <Introduce name ="우든이" />,
  document.getElementById('root')
);

마지막으로 클래스형 컴포넌트에 props를 설정할 때에는 다음과 같이 render함수에서 this를 이용하여 설정하여 줍니다.

class Introduce extends Component {

    render(){
        const { name, major} = this.props;
        return (
            <div>
                <h1>안녕하세요!</h1>
                <p>이름은 {name}이고, 전공은 {major}입니다.</p>
            </div>
        );
    }
}

 

# props의 기본값 설정 및 검증

 

defaultProps를 사용하여 다음과 같이 props의 기본값을 설정해 줄 수 있습니다.

Introduce.defaultProps = {
    name : "송우든"
};

 

PropTypes을 이용하여 필수 props를 지정하거나 props의 타입을 검증할 수 있습니다.

import PropTypes from 'prop-types';

Introduce.propTypes = {
    name: PropTypes.string
};

 

또한, isRequired를 사용하면 PropTypes를 지정하지 않았을 때의 경고 메시지를 띄어줄 수 있습니다.

Introduce.propTypes = {
    name: PropTypes.string,
    major : PropTypes.string.isRequired
};

 

major에 값이 설정되어 있지 않다는 오류 메시지를 확인할 수 있습니다.