React) props란?

props란

 properties의 약어로 컴포넌트 속성을 설정할 때 사용하는 요소이다. props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있고, 해당 컴포넌트 자신은 이를 변경할 수 없다. props는 컴포넌트의 JSX를 리턴하는 부분에서 클래스형 컴포넌트의 경우에는 'this.props.props명', 함수형 컴포넌트의 경우에는 'props.props명'의 형태로 사용할 수 있다.

 

1) defaultProps

 props 값을 따로 설정하지 않았을 때 보여줄 기본값을 설정하는 것으로, defaultProps는 해당 컴포넌트 자신의 파일에서 설정할 수 있다.

 

2) children

 props의 종류 중에 부모 컴포넌트에서 해당 컴포넌트 태그 사이에 전달하는 내용을 값으로 삼는 것을 children이라고 한다. children는 props.children으로 값에 접근할 수 있다.

 

3) ES6 비구조화 할당 문법을 사용해 내부 값을 바로 추출하는 방법

 위에서는 props를 사용할 때마다 props명 앞에 'props.' 키워드를 붙어야 했다. 이를 보다 간편하고 가독성있는 코드로 바꾸기 위해서는 아래와 같이 수정할 수 있다.

 

 

 위와 같은 방법은 '비구조화 할당(destructing assignment, 구조 분해 문법)'으로, 객체에서 값을 추출하여 바로 할당하는 방식이다. 이 코드를 다시 한번 줄인다면 아래와 같이 함수형 컴포넌트의 인자부에 props 대신 넣을 수도 있다.

 

 

 

4) propTypes를 통한 props 검증

 컴포넌트의 필수 props를 지정하거나 props의 타입을 지정할 때 사용한다. 사용하기 위해서는 'prop-types'의 PropTypes를 import 해야 하며, 사용 방식은 defaultProps와 유사하다. 필수 props를 지정할 때는 isRequired을 부여할 수 있다.

 

propTypes의 종류

• array: 배열
• arrayOf(타 PropType) : 해당 PropType의 값으로 이루어진 배열
• bool: trule/false
• func: 함수
• number: 숫자
• object: 객체
• string: 문자열
• symbol: ES6의 Symbol
• node: 숫자, 문자열, JSX와 같은 렌더링 가능한 모든 것. cf.children도 node PropType에 해당한다.
• instanceOf(클래스): 특정 클래스의 인스턴스
• oneOf(배열): 해당 배열의 값 중 하나
• oneOfType(PropType의 배열): 해당 배열의 값
• objectOf(PropType) : 객체의 모든 값이 해당 PropType인 객체
• shape({key1: PropType1, key2: PropType2}): 주어진 스키마의 객체
• any: 모든 종류 가능

 

---

cf. 클래스형 컴포넌트에서의 props 사용

해당 글에서는 대부분의 예제가 함수형 컴포넌트를 정의하고 있다. 아래는 클래스형 컴포넌트 방식으로 작성한 것이다.

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

class CustomComponent extends Component {
	render() {
    	const { prop1, prop2, prop3 } = this.props;
        return( ... );
    }
}

CustomComponent.defaultProps = {
	prop1: ' ',
    prop2: 1,
}

CustomComponent.propTypes ={
	prop1: PropTypes.string,
    prop2: PropTypes.number.isRequired // number 타입이며, 반드시 필요
}

export default CustomComponent;

 위의 코드에서 defaultProps와 propTypes를 정의할 때는 클래스 외부에서 정의하고 있다. 만약 내부에서 정의하고자 할 때는 static 변수로 defaultProps, propTypes라는 이름의 객체를 정의하면 된다.

 

Props를 사용하는 방식을 크게 세 가지로 나누어보았다. 아래와 같다.

const rootElement = document.getElementById("root");

// (1) props 데이터를 하나로 묶어 함수의 인자로 받는 형태로 작성
function Hello(props) {
	return <h1>Hello, Component {props.name}</h1>;
}
const element = <Hello name="component" />;

// (2) props라는 변수명 대신 다른 변수명도 사용 가능
function Hello(data) {
	return <h1>Hello, Component {data.name}</h1>;
}
const element = <Hello name="component" />;

// (3) 객체 형태({}) 내부에 사용되는 Props들을 담아 이를 함수 인자로 받는 형태로 작성
// 이 때는 JSX 상에서 Props를 사용할 때 props, data 등과 같은 변수명이 필요없다.
function Hello({name}) {
	return <h1>Hello, Component {name}</h1>;
}
const element = <Hello name="component" />;

// (3) - 1. 함수형 컴포넌트는 아래와 같이 간략하게 작성할 수도 있다.
const Hello = (data) => <h1>Hello, {data.name}</h1>;
const element = <Hello name="이름"/>;

ReactDOM.render(element, rootElement);