props

class component의 props 속성에 대해서 살펴본다.

props

props(properties)는 컴포넌트 생성 시 외부에서 설정하는 속성을 말한다.

props는 읽기 전용이며 수정이 불가능하다.

class MainComponent extends React.Component {
    render(){
        return (
            <>
                <h1>Hello {this.props.name}! </h1>
                <h1>Let's study react version {this.props.version}</h1>
            </>
        );
    }
}

const app = ReactDOM.createRoot(document.querySelector("#app"));
app.render(
    <MainComponent name="열혈강사" version="18"/>
);

name과 version에 해당하는 데이터는 state가 아닌 태그에 작성된 외부 데이터이다. 이를 컴포넌트 내에서는 props 속성으로 접근할 수 있다. 그림으로 보면 다음과 같은 구조이다.

데이터는 모두 문자열로 저장되며, 데이터 유형을 지정하고 싶다면 표현식을 사용해야 한다.

props 표현식 설정

문자열이 아닌 데이터를 property로 설정해야 하는 경우에는 다음과 같이 JSX에 표현식을 작성한다.

app.render(
    <MainComponent name={"열혈강사"} version={18}/>
);

실행 결과는 같지만 데이터의 형태를 다르게 인식한다.

props Type 검사

props 표현식 설정 시 원하는 자료형인지 검사할 수 있다. prop-types 의존성이 필요하다.

GitHub - facebook/prop-types: Runtime type checking for React props and similar objectsGitHub

다음과 같이 추가 CDN을 작성한다. 개발 또는 배포 단계에 맞는 형태를 골라 작성한다.

<!-- development version -->
<script src="https://unpkg.com/prop-types@15.6/prop-types.js"></script>

<!-- production version -->
<script src="https://unpkg.com/prop-types@15.6/prop-types.min.js"></script>

컴포넌트 내부에 다음과 같이 타입 검사 객체를 작성한다.

name은 문자열(PropTypes.string) 설정
version은 숫자(PropTypes.number) 설정

static propTypes = {
    name : PropTypes.string,
    version : PropTypes.number
};

제공하는 모든 타입 정보는 하단 링크에서 확인할 수 있다.

https://github.com/facebook/prop-types#usage

동일한 컴포넌트에 검사 코드를 추가한 뒤 실행하면 PropType 검사가 이루어진다.

설정된 형태와 동일한 Property가 설정된 경우 메세지 출력 없이 화면 정상 출력
설정된 형태와 다른 Property가 설정된 경우 경고메세지가 출력 및 화면 정상 출력

설정과 동일할 경우

app.render(
    <MainComponent name={'열혈강사'} version={18}/>
);

설정과 동일하지 않을 경우

version 값을 문자열로 전달해본다.

app.render(
    <MainComponent name={'열혈강사'} version={'18'}/>
);

다음과 같은 오류 메세지가 발생한다.

Warning: Failed prop type: Invalid prop version of type string supplied to MainComponent, expected number

props 누락에 대한 처리

다음과 같이 props가 설정되지 않을 경우에 대한 처리도 필요하다.

app.render(
    <MainComponent/>
);

이 경우 props에 설정되는 항목이 없기 때문에 해당 자리에 아무 내용도 나오지 않는다.

만약 이 경우 문제가 될 수 있다면 다음 두 가지 방법이 있다.

해당 항목이 필수임을 PropTypes로 설정한다.
props에 없을 경우를 대비한 기본값을 설정한다.

이어지는 예시에서는 name 항목을 필수 항목으로 설정하고, version 항목에는 1이라는 기본값을 부여한다.

PropTypes 필수 설정

propTypes 설정 객체를 다음과 같이 변경시킨다.

static propTypes = {
    name : PropTypes.string.isRequired,//필수 항목 설
    version : PropTypes.number
};

name이 설정되지 않으면 다음과 같은 오류 메세지가 콘솔창에 출력된다.

Warning: Failed prop type: The prop name is marked as required in MainComponent, but its value is undefined.

props 기본값 설정

name이 없을 경우 아무개, version이 없을 경우 1로 설정되도록 기본값을 구현한다. 기본값은 PropTypes 검사 객체와는 별개로 클래스 내부에 다음과 같이 작성한다.

static defaultProps = {
    name : "아무개",
    version : 1
};

최종 코드

최종적으로 완성된 코드는 다음과 같다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React CDN Example</title>
    
</head>
<body>

    <div id="app"></div>
    
    <!-- 개발용 CDN -->
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

    <!-- 배포용 CDN -->
    <!-- <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script> -->
    <!-- <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script> -->

    <!-- react type 검사 CDN -->
    <script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>

    <!-- 바벨 CDN(using JSX) -->
    <script src=" https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
        class MainComponent extends React.Component {
            static defaultProps = {
                name : "아무개",
                version : 1
            };
            static propTypes = {
                name : PropTypes.string.isRequired,//필수 항목 설정
                version : PropTypes.number
            };
            render(){
                return (
                    <>
                        <h1>Hello {this.props.name}! </h1>
                        <h1>Let's study react version {this.props.version}</h1>
                    </>
                );
            }
        }

        const app = ReactDOM.createRoot(document.querySelector("#app"));
        app.render(
            <MainComponent/>
        );
    </script>
</body>
</html>

Previousstate Nextevent

Last updated 1 year ago