props

props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다. props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트(현 상황에서는 App 컴포넌트가 부모 컴포넌트이다.)에서 설정할 수 있다.

JSX 내부에서 props 렌더링

우선 MyComponent 컴포넌트를 수정하여 해당 컴포넌트에서 name이라는 props를 렌더링하도록 설정하자. props 값은 컴포넌트 함수의 파라미터로 받아 와서 사용할 수 있다. props를 렌더링할 때 JSX 내부에서 {}로 감싸주면 된다.

import React from 'react';

const MyComponent = props => {
	return <div>안녕 나는 {props.name}이야!!!</div>;
};

export default MyComponent;

props값을 따로 지정하지 않았을 때 보여줄 기본값을 설정하는 defaultProps를 사용하자.

import React from 'react';
import MyComponent from './MyComponent';

const App = () => {
	return <MyComponent name = "react" />;
}
MyComponent.defaultProps = {
	name: 'hello'
};

export default App;

 

태그 사이의 내용을 보여주는 children

리액트 컴포넌트를 사용할 때 컴포넌트 태그 사이의 내용을 보여주는 props가 children이다.

import React from 'react';
import MyComponent from './MyComponent';

const App = () => {
	return <MyComponent>리액트</MyComponent>;
};

return default App;

위 코드에서 MyComponent 태그 사이에 작성한 리액트라는 문자열을 MyComponent 내부에서 보여 주려면 props.children 값을 보여 주어야 한다.

import React from 'react';

const MyComponent = props => {
	return (
    	<div>
        	안녕하세요, 제 이름은 {props.name}입니다!!! </br>
            children은 {props.children}입니다!!!
        </div>
    );
};

MyComponent.defaultProps = {
	name: '니하오'
};

export default MyComponent;

비구조화 할당 문법을 통해 props 내부 값 추출하기

현재 MyComponent에서 props 값을 조회할 때마다 props.name, props.children과 같이 props 라는 키워드를 앞에 붙인다. 이러한 작업을 더 편하게 하기 위해 ES6의 비구조화 할당 문법을 사용하여 내부 값을 바로 추출하는 방법이 있다.

import React from 'react';

const MyComponent = props => {
	const { name, children } = props;
    return (
    	<div>
        	안녕 나는 { name }이야!! </br>
            children은 { children }이야!!!
        </div>
    );
};
MyComponent.defaultProps = {
	name: '곤니찌와'
};
export default MyComponent;

함수의 파라미터를 바로 비구조화해서 사용도 할 수 있다.

import React from 'react';

const MyComponent = ({ name, children }) => {

    return (
    	<div>
        	안녕 나는 { name }이야!! </br>
            children은 { children }이야!!!
        </div>
    );
};
MyComponent.defaultProps = {
	name: '곤니찌와'
};
export default MyComponent;

propTypes를 통한 props 검증

컴포넌트의 필수 props를 지정하거나 props의 타입을 지정할 때는 propsTypes를 사용한다. 컴포넌트의 propsTypes를 지엉하는 방법은 defautlProp을 설정하는 것과 비슷하다. 우선 propTypes를 사용하려면 코드 상단에 import 구문을 사용하여 불러와야 한다.

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

const MyComponent = ({ name, children }) => {
    return (
    	<div>
        	안녕 나는 { name }이야!! </br>
            children은 { children }이야!!!
        </div>
    );
};

MyComponent.deafaultProps = {
	name: '구텐탁'
};

MyComponent.propTypes = {
	name: propTypes.string
};

export default MyComponent;

isRequired를 사용하여 필수 propTypes 설정

 

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

const MyComponent = ({ name, age, children }) => {
    return (
    	<div>
        	안녕 나는 { name }이야!! </br>
            children은 { children }이야!!! </br>
            나이는 { age }라니까!!!
        </div>
    );
};

MyComponent.deafaultProps = {
	name: '구텐탁'
};

MyComponent.propTypes = {
	name: propTypes.string
    age: propTypes.number.isRequired
};

export default MyComponent;

더 많은 PopTypes 종류는 prop-types에서 확인할 수 있다.

클래스형 컴포넌트에서 props 사용하기

클래스형 컴포넌트에서 props를 사용할 때는 render 함수에서 this.props를 조회하면 된다. 그리고 defaultProps와 propTypes는 똑같은 방식으로 설정할 수 있다. MyComponent를 다음과 같이 클래스형으로 컴포넌트를 변경해보자.

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

class MyComponent extends Component {
	render () {
    	const { name, age, children } = this.props; // 비구조화 할당
        return (
            <div>
                안녕 나는 { name }이야!! </br>
                children은 { children }이야!!! </br>
                나이는 { age }라니까!!!
            </div>
        );
	}
}

MyComponent.deafaultProps = {
	name: '구텐탁'
};

MyComponent.propTypes = {
	name: propTypes.string
    age: propTypes.number.isRequired
};

export default MyComponent;

클래스형 컴포넌트에서 defaultProps와 proptypes를 설정할 때 class 내부에서 지정하는 방법도 있다.

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

class MyComponent extends Component {
    static deafaultProps = {
        name: '구텐탁'
    };

    static propTypes = {
        name: propTypes.string
        age: propTypes.number.isRequired
    };
    
	render () {
    	const { name, age, children } = this.props; // 비구조화 할당
        return (
            <div>
                안녕 나는 { name }이야!! </br>
                children은 { children }이야!!! </br>
                나이는 { age }라니까!!!
            </div>
        );
	}
}

export default MyComponent;