<React 파헤치기-11> 컴포넌트 - 3. property

Property

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

 

property의 기초

App 컴포넌트는 MyComponent에 속성 형태로 프로퍼티를 전달한다.

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

class App() extends React.Component{ 
  render(){ 
    return ( 
      <div> 
        <MyComponent name="msg"/> 
      <div/> 
    ); 
  } 
} 
export default App;

MyComponent에서는 name이라는 이름의 프로퍼티로 전달받은 "msg" 문자열을 render 함수에서 참조한다.

아래 코드에서 this.props.name으로 프로퍼티 값을 참조하고 있음을 확인할 수 있다.

import React from "react"; 

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

 

property의 다양한 사용법

property의 자료형은 미리 선언해두는 것이 좋다. 이는 react에서 제공하는 prop-types를 사용한다.

property의 자료형을 미리 선언하는 것의 장점

- react 엔진이 property로 전달하는 값의 변화를 효율적으로 감지할 수 있다.

- 개발자가 지정되지 않은 자료형의 property를 전달하려 할 때 경고 메시지를 통해 알려준다.

 

문자열은 ""를 사용하여 전달하며 다른 property들은 중괄호 {}를 통해 전달한다.

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

class MyComponent2() extends React.Component{ 
  render(){ 
    const{
      boolValue,
      numValue,
      arrayValue,
      objValue,
      nodeValue,
      funcValue,
    } = this.props;
    
    return ( 
      <div> 
        <span>boolean : {boolValue}</span>
        <span>number : {numValue}</span>
        <span>array : {arrayValue}</span>
        <span>object : {objValue}</span>
        <span>node : {nodeValue}</span>
        <span>function : {String(funcValue)}</span>
      <div/> 
    ); 
  } 
}

MyComponent2.propTypes = {
  boolValue : PropTypes.bool,
  numValue : PropTypes.number,
  arrayValue : PropTypes.arrayOf(PropTypes.number),
  objValue : PropTypes.object,
  nodeValue : PropTypes.node,
  funcValue : PropTypes.func,
}
export default MyComponent2;

객체를 전달할 때는 App 컴포넌트의 주석처럼 중괄호를 두 번 사용하는 방법이 있으나 개발자 간의 실수를 줄이기위해 변수에 객체를 담아 전달하는 방식을 선호한다(배열, 객체, 노드, 함수 모두 동일).

import React from "react"; 
import MyComponent2 from './MyComponent2';

class App() extends React.Component{ 
  render(){ 
    const array = [1,2,3];
    const obj = { name : '제목', age : 30 };
    const node = <h1>header</h1>
    const func=() => {console.log('function property');};
    
    return (
      <MyComponent2
        boolValue = {true}
        numValue = {1}
        arrayValue = {array}
        // objValue = { { name:"mingmeng", age:23 } }
        objValue = {obj}
        nodeValue = {node}
        funcValue = {func}
      />
    );
  } 
} 
export default App;

 

필수 property와 property의 기본값 지정하기

1. 필수 property

PropTypes의 isRequired를 이용하여 requiredStringValue 변수를 선언해 필수 property로 정의한다.

필수 property로 선언되면 상위 컴포넌트에서 해당 컴포넌트를 사용할 때 반드시 필수 프로퍼티를 전달해야하고, 전달하지 않으면  console 창에 오류가 발생한다.

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

class MyComponent3() extends React.Component{ 
  render(){ 
    const {
      objValue,
      requiredStringValue
    } = this.props;
    
    return ( 
      <div> 
        <div>객체값 : {String(object.entries(objValue))}</div>
        <div>필수값 : {requiredStringValue}</div>
      <div/> 
    ); 
  } 
}

MyComponent3.propTypes = {
  objValue : PropTypes.shape({
    name : PropTypes.string,
    age : PropTypes.number,
  })
};
requiredStringValue : PropTypes.string.isRequired;

export default MyComponent3;

2. property의 기본값 지정하기

PropTypes의 defaultProps를 이용하여 property의 기본값을 정의할 수 있다.

특히, 아래 코드에서 사용한 boolean 값은 상위 컴포넌트에서 아무런 값도 전달하지 않을 경우 undefined가 전달된다.

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

class MyComponent4() extends React.Component{ 
  render(){ 
    let message1 = "";
    if(this.props.boolValue === false)
      message1 = "boolValue의 default value는 false입니다."
      
    let message2 = "";
    if(this.props.boolValueWithoutDefault === false)
      message2 = "boolValueWithoutDefault default value는 false입니다."
    
    return ( 
      <div> 
        {message1}
        {message2}
      <div/> 
    ); 
  } 
}

MyComponent4.propTypes = {
  boolValue : Proptypes.bool,
  boolValueWithoutDefault : Proptypes.bool
};

MyComponent4.defaultProps = {
  boolValue : false
};

export default MyComponent4;

import React from "react"; 
import MyComponent3 from './MyComponent3';
import MyComponent4 from './MyComponent4';

class App() extends React.Component{ 
  render(){  
    return (
      <div>
        <MyComponent3 objValue = {{age = "20살" }}/>
        <MyComponent4/>
      </div>
    );
  } 
} 
export default App;

- App 컴포넌트에서 MyComponent3을 사용할 때 objValue의 age 에 문자열을 대입했기때문에 오류가 한 번 발생하고, 필수 property인 requiredStringValue를 전달하지 않았기 때문에 총 두 번의 오류가 발생한다.

- App 컴포넌트에서 MyComponent4를 사용할 때 아무 값도 전달하지 않았다.

따라서 boolValue는 기본값으로 false를 가지고 boolValueWithoutDefault 는 아무 값도 전달받지 못했기 때문에 undefined를 가진다. 이에 message1만 출력된다.