[리엑트(React)] 프로퍼티(props)

프로퍼티는 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용한다. 이때 프로퍼티값은 수정할 수 없다는 특징을 가진다. 

 

예제)

class App extends React.Component{
	render(){
    	return(
        	<div className="body">
            	<MyComponent name="message" />
        	</div>
        );
    }
}

Mycomponent 컴포넌트에서는 name 이라는 이름의 전달받은 "message"라는 문자열값을 render() 함수에서 참조할 수 있다. 코드를 보면 render() 함수에서 this.props.name으로 프로퍼티값을 참조하고 있다.

class MyComponent extends React.Component{
	render(){
		const name = this.props.name;
        return <span>{name}</span>;
	}
}

여기서 중요한 것은 프로퍼티가 상위 컴포넌트에서 하위 컴포넌트로 전달된다는 것. 코드를 보면 App 컴포넌트가 MyComponent 컴포넌트를 포함하고 있으며 프로퍼티는 App > Mycomponent 방향으로 전달된다.

 

- 프로퍼티에서는 자바스크립트의 자료형을 모두 사용할 수 있다. 이때 프로퍼티의 자료형은 미리 선언해주는 것이 좋다. 

 

예제2) 프로퍼티의 자료형 선언

import React from 'react'
import PropTypes from 'prop-types'
// PropTypes : 컴포넌트에 전달될 속성의 유형을 확인해 준다
// favorite 속성은 props 객체 안에 들어간다!
class Food extends React.Component{
  constructor(props){
    super(props)
  }
  render(){
    return <div>
        <h1>{this.props.favorite}은 맛있어 {this.props.numberOf}마리 먹었어!</h1>
    </div>
  }
}
// Food 를 외부로 export 하기 전에, 속성 관련 설정을 추가한다!
// Food.propTypes : 컴포넌트의 속성
// PropTypes.string : 속성검사 객체가 제공하는 문자열 검사 가능
// isRequired : 반드시 전달되어야만 하는 속성이다, 를 추가로 명시
Food.propTypes = {
    favorite: PropTypes.string.isRequired, // 문자만
    numberOf: PropTypes.number.isRequired  // 숫자만
}
export default Food;

class App extends React.Component{
  constructor(props){
    super(props)
  }
  render(){
    return <div>
      <Food favorite ="치킨" numberOf={2} />  
      </div>
  
  }
}

export default App;

결과를 보면 컴포넌트의 프로퍼티로 전달한 문자열과 숫자가 함께 출력되었다.