[React] 03. 리액트 props

💚props

properties 의 줄임말
컴포넌트의 속성을 설정할 때 사용

props를 설정하는 방법에는 여러 가지가 있는데요.

💛 JSX 코드 내부에서 props 설정하기

JSX 내부에서 props을 설정하는 방법은 앞에서 다뤘던 자바스크립트 표현식을 사용하는 방법과 동일합니다.

아래 코드와 같이 {}를 사용하여 설정해줄 수 있어요!

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 ="송우든" major="컴퓨터공학과"/>,
  document.getElementById('root')
);

지금까지 함수형 컴포넌트에서 props를 설정하는 방법을 정리하였는데요. 클래스형 컴포넌트에서 props를 설정하는 방법에 대해 정리해 보도록 하겠습니다.

클래스형 컴포넌트에서 props를 사용할 때에는 다음과 같이 render()함수안에서 this를 사용하여 설정해 줄 수 있어요!

class Introduce extends Component {

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

💚props의 기본값 설정과 검증

props에 기본값을 설정할 때에는 다음과 같이 defaultProps를 사용하여 설정해주는데요.
컴포넌트명.defaultProps = {}형태로 사용합니다.

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

또한, propsType을 통해 필수 props를 지정하거나 props타입을 검증할 수 있습니다.

import PropTypes from 'prop-types';

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

마지막으로, isRequired를 사용하면 propsType을 지정하지 않았을 때에 경고 메세지를 받을 수 있어요.

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

아래 메세지는 major에 값이 설정되어 있지 않다는 메세지 입니다.

참고 자료 및 사이트

React 공식문서
벨로피트와 함께하는 모던 리액트