[React] props - 클래스형 컴포넌트

지난번에 주로 쓰게 될 함수형 컴포넌트에서 props 사용법을 배웠다면, 이번엔 클래스형 컴포넌트에 대해서 간단하게 알아보겠습니다.

props에 대한 기초적인 설명은 함수형 컴포넌트 props의 설명을 참조해 주세요.

2021.11.02 - [Programming/React] - props - 함수형 컴포넌트

props - 함수형 컴포넌트

---

1. 클래스형 컴포넌트 사용

클래스형 컴포넌트에서 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;

 

다음은 클래스형 컴포넌트에서의 props 사용입니다.

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;