< React > props, defaultProps, propTypes

 

React 컴포넌트의 속성을 설정할 때 사용하는 요소인 props에 대해 공부해 보았다,

 

1. Props

props는 해당 컴포넌트의 부모 컴포넌트에서 설정할 수 있어서, 바로 props를 적용할 수 없다.

 

최상단의 컴포넌트가 App.js라고 할 때, 만약 myComponent의 props를 사용하고자 하면 App.js에서 설정해야 한다. myComponent는 자기 자신의 props를 읽기 전용으로만 사용하게 된다.

 

아래 코드는 yarn create react-app 명령어를 입력하고, 현재 myComponent.js 파일을 막 선언한 시점에서 작성하였다.

myComponent를 다음과 같이 선언하고, App.js도 다음과 같이 선언한다. ( component 외 코드는 제외했다. )

 

const MyComponent = props => {
	return <div> Hello, my name is {props.name}!</div>;
};

 

아래는 App.js 부분이다. 

 

Const App = () => {
	return <MyComponent name = "Your-Name" />;
    };

 

yarn start를 커맨드에 입력해보면 아마 Hello, my name is Your-Name! 이 브라우저에 뜰 것이다. ( 깜빡하고 기록을 못해 사진이 없다.. )

 

이를 클래스형 컴포넌트로 확장해보자. 

 

class MyComponent extends Component {

    render() {
        const {name, Number, children} = this.props

        return (
            <div>
                My name is {name} <br/>
                children is {children} <br/>
                I like this {Number} !
            </div>
        );
    }
}

 

아래는 App.js 부분이다.

 

const App = () => {
  return <MyComponent name="INSERT" Number={15}> Your React </MyComponent>;
};

코드에서 확인 할 수 있듯, 클래스형 컴포넌트의 기본 함수인 Render() 함수에 this.props로 App.js에서 설정된 props들을 한꺼번에 가져와 원하는 변수(name, Number, children)로 설정함을 알 수 있다.

 

name이나 Number는 App에서 설정된 myComponent의 특정 props인걸 알 수 있다. 하지만 children은 따로 출처가 없다.

 

children props는 해당 컴포넌트 태그 안의 값을 가져오는 고유의 props이다.

<MyComponent> Data < /MyComponent>, Data 부분을 바로 가져오도록 하는 props가 children props라고 이해하면 된다.

 

App.js에서 설정한 props 값들이 정상적으로 myComponent로 전달된 걸 확인 할 수 있다.

 

2. DefaultProps, PropTypes

만약 App에서 name이나 Number props가 입력값이 없다면 null을 의미하고, 다음과 같이 출력될 것이다.

 

My name is 

children is Your React

I like this !

 

그러므로 해당 props에 값이 없을 경우에 기본 값을 설정하는 걸 DefaultProps에 만들어 주면 된다. 다음 코드를 보자.

 

class MyComponent extends Component {

    static defaultProps = {
        name : "Default Your Name",
        Number : 100
    };

    render() {
        const {name, Number, children} = this.props

        return (
            <div>
                My name is {name} <br/>
                children is {children} <br/>
                I like this {Number} !
            </div>
        );
    }
}

 

App.js에서 name과 Number props를 지우고 브라우저를 확인하면 다음과 같이 출력된다.

 

특정 사이트를 제작 할 때, 사용자가 처음 사용할 경우의 초깃값을 렌더링할 때나 초기 화면 등을 구성할 때 활용하면 될 것같다.

 

 

다음은 propsType 기능을 살펴보자.

 

컴포넌트의 필수 props를 지정하거나, 타입을 지정할 때 사용하는 기능으로, import PropTypes from 'prop-types'; 코드를 추가하여 사용한다. 코드는 다음과 같다.

 

import propTypes from "prop-types";

class MyComponent extends Component {

    static defaultProps = {
        name : "Default Your Name",
        Number : 100
    };

    static propTypes = {
        name : propTypes.string,
        Number : propTypes.number
    };// name의 타입은 무조건 문자열로 전달함을 명시

    render() {
        const {name, Number, children} = this.props

        return (
            <div>
                My name is {name} <br/>
                children is {children} <br/>
                I like this {Number} !
            </div>
        );
    }
}

 

name props는 string으로, Number props는 number로 타입을 지정하도록 한다. 그래서 다른 타입이 props로 입력되면, 출력은 되지만 warning 문구가 떠서 propTypes가 잘못됬음을 출력해준다.

 

이 두 가지 용법은 필수 사항은 아니지만, 협업하여 개발 시 다른 사람들에게 어떤 props가 요구되는 지 쉽게 알게 해준다. React로 협업한다면 다음 기능을 통해 따로 주석 등의 설명 없이도 props 요구사항을 알기 쉽게 해주자.