지난 포스트에서 함수형 컴포넌트의 props를 알아봤으니, 이번엔 클래스형 컴포넌트의 props 사용에 대해 알아보겠습니다.

클래스형 컴포넌트의 props

클래스형 컴포넌트에서 props를 이용하는 방식은 함수형과 다르지 않습니다.

먼저 비교를 위해 지난 시간에 만든 함수형 컴포넌트 코드를 가져와봤습니다.

import React from 'react';
import PropTypes from 'prop-types';

const PropsPractice = ({data, children}) => {
    return (
        <div>
            props 익히기=> {data} <br />
            컴포넌트 사이의 내용 => {children}
        </div>
    );
};

PropsPractice.defaultProps = {
    data: "기본으로 설정된 값입니다."
};

PropsPractice.propTypes = {
    data: PropTypes.string.isRequired,
};

export default PropsPractice;

위 함수형 코드를 클래스형 컴포넌트 코드로 수정해보겠습니다.

import React, {Component} from 'react';
import PropTypes from 'prop-types';

class PropsPracticeClass extends Component {
    render() {
        const {data, children} = this.props;

        return (
            <div>
                props 익히기=> {data} <br />
                컴포넌트 사이의 내용 => {children}
            </div>
        );
    }
}

PropsPracticeClass.defaultProps = {
    data: "기본으로 설정된 값입니다."
}

PropsPracticeClass.propTypes = {
    data: PropTypes.string.isRequired,
};

export default PropsPracticeClass;

클래스형 컴포넌트의 특징으로 defaultProps와 propTypes의 설정 과정에서 함수에 외부에 선언했던 함수형과는 다르게 class 내부에서 선언이 가능하다는 특징이 있습니다. 위의 코드를 class 내부에서 선언한 방식으로 바꿔보겠습니다.

import React, {Component} from 'react';
import PropTypes from 'prop-types';

class PropsPracticeClass extends Component {
    static defaultProps = {
        data: "기본으로 설정된 값입니다."
    };

    static propTypes = {
        data: PropTypes.string,
    };

    render() {
        const {data, children} = this.props;

        return (
            <div>
                props 익히기=> {data} <br />
                컴포넌트 사이의 내용 => {children}
            </div>
        );
    }
}

export default PropsPracticeClass;

이렇게 클래스형 컴포넌트에서 props를 사용하는 방법을 알아보았습니다.

---

초기 포스트에서 언급됐지만, 함수형 컴포넌트 사용을 권장하고 있기에 클래스형 컴포넌트의 사양은 이런식으로 간단히 알아보고 넘어가도록 하겠습니다. 이 말이 클래스형 컴포넌트를 몰라도 된다~라는 것은 절대로 아니니 클래스형 컴포넌트 방식도 알아두시는 것이 좋습니다.