[React] Component - 프로퍼티

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

프로퍼티의 기초

다음은 App 컴포넌트에서 프로퍼티를 MyComponent 컴포넌트에 전달한 예제이다.

import React from "react";

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

export default App;

MyComponent 컴포넌트에는 name이라는 이름의 프로퍼티로 전달받은 "message"라는 문자열값을 render() 함수에서 참조할 수 있다.

코드에서는 this.props.name으로 프로퍼티값을 참조하고 있다.

import React from "react";

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

export default App;

여기서 중요한 것은 프로퍼티가 상위 컴포넌트에서(APP) 하위 컴포넌트(MyComponent)로 전달된다는 것이다. 이것을 '단방향으로 데이터가 흐른다'라고 표현한다.

프로퍼티의 다양한 사용 방법 알아보기

프로퍼티에서는 자바스크립트의 자료형을 모두 사용할 수 있다. 프로퍼티의 자료형을 미리 선언하면 리액트 엔진이 프로퍼티로 전달하는 값의 변화를 효율적으로 감지할 수 있고, 개발자가 실수로 지정되지 않은 자료형을 프로퍼티에 전달하려고 할 때 경고 메시지로 알려주는 기능 등을 이용하기 위해 프로퍼티의 자료형은 미리 선언해주는 것이 좋다.

문자열형 프로퍼티 사용하기

우선 프로퍼티에 자료형을 선언하는 방법은 리액트에서 제공하는 prop-types를 이용하면 된다. 아래의 코드를 보자

import React from "react";
import PropsTypes from "prop-types";

class PropsComponent extends React.Component {
  render() {
    return <div className="message-container">{this.props.name}</div>;
  }
}

PropsComponent.propsTypes = {
  name: PropsTypes.string,
};

export default PropsComponent;

위의 코드를 보면 import문을 이용해서 prop-types 라이브러리를 사용하고 div에서 name 프로퍼티로 받은 문자열을 출력하는 코드임을 알 수 있고, 중요한 프로퍼티 자료형 선언 부분은 PropsComponent.PropsTypes 구문이다.

name 프로퍼티에 string으로 자료형을 선언하여 PropsComponent.PropsTypes 에 저장하는 것을 볼 수 있다.

위에서 작성한 컴포넌트를 화면에 그려서 직접 눈으로 확인해 보자. 그러기 위해서는 App 컴포넌트의 내용을 아래와 같이 작성해보자.

import React, { Component } from "react";
import PropComponent from "./03/PropsComponent";

class App extends Component {
  render() {
    return <PropComponent name="두잇 리액트" />;
  }
}

export default App;

위와 같이 App 컴포넌트를 작성후 실행을 해보면 아래의 이미지와 같이 결과를 볼 수 있다.

다양한 프로퍼티 사용하기

프로퍼티에 문자열을 전달할 때는 큰따옴표("")를 사용한다. 하지만 숫자형이나 불리언 등의 값을 전달할 때는 큰따옴표를 사용할 수 없다. 만약 사용한다면 문자열로 인식이 되는 부분을 주의해야 한다. 그렇기 때문에 리액트에서 문자열 외의 값은 따옴표 대신 중괄호({})를 사용해야 한다.

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

class ChildComponent extends React.Component {
  render() {
    const {
      boolValue,
      numValue,
      arrayValue,
      objValue,
      nodeValue,
      funcValue,
    } = this.props;
    return (
      <div>
        <span>불리언값: {boolValue}</span>
        <span>숫자값: {numValue}</span>
        <span>배열값: {arrayValue}</span>
        <span>객체값: {String(objValue)}</span>
        <span>노드값: {nodeValue}</span>
        <span>함수값: {String(funcValue)}</span>
      </div>
    );
  }
}

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

export default ChildComponent;

위의 코드와 같이 문자열이 아닌 프로퍼티는 중괄호를 이용해 표현하는 것을 볼 수 있고, 코드 하단의 .propTypes에서 bool,number 등 여러가지 자료형을 선언할 수 있다.

불리언 프로퍼티 사용하기

위의 내용에 따르면 문자열 외의 값은 중괄호로 감싸 전달해야 한다고 하였지만 불리엇값은 true일 경우 프로퍼티의 이름만 선언해도 전달이 가능하다.

<ChildComponent boolValue />

아래와 같이 이름을 생략하면 false가 아닌 undefined가 전달된다.

<ChildeComponent />

객체 프로퍼티, 필수 프로퍼티 사용하기

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

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

ChildComponent2.propTypes = {
  objValue: PropTypes.shape({
    name: PropTypes.string,
    age: PropTypes.number,
  }),

  requiredStringValue: PropTypes.string.isRequired,
};

export default ChildComponent2;

return문의 div객체값: 을 보면 내장함수 String()과 Object.entries()를 사용하여 객체를 문자열로 변환하여 출력하고 객체 프로퍼티의 자료형은 PropTypes의 shape를 사용하여 정의한다. 이러한 방법으로 객체 프로퍼티를 정의한다.

Object.entries()는 [key, value] 쌍의 배열을 반환하는 메서드 입니다.
참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/entries

프로퍼티 자료형 선언 부분(ChildComponent2.propTypes)을 보면 PropTypes에 정의된 변수 안의 특수 변수 isRequired를 이용하여 requiredStringValue를 필수 프로퍼티로 지정하는 것을 볼 수 있다. 이렇게 특정 컴포넌트에 꼭 전달되어야 하는 프로퍼티가 있다면 필수 프로퍼티로 지정하면 된다.

프로퍼티에 기본값 지정하기

만약 프로퍼티에 기본값을 지정하고 싶다면 기본값을 지정한 컴포넌트의 defaultProps 값을 이용하면 된다.

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

class DefaultPropsComponent extends React.Component {
  render() {
    let message1 = "";
    if (this.props.boolValue === false) {
      message1 = "boolValue 기본값이 false입니다.";
    }
    let message2 = "";
    if (this.props.boolValueWithoutDefault === false) {
      message2 = "boolValueWithoutDefalut 기본값이 false입니다";
    }
    return (
      <div className="message-container">
        {message1}
        {message2}
      </div>
    );
  }
}

DefaultPropsComponent.propTypes = {
  boolValue: PropTypes.bool,
  boolValueWithoutDefault: PropTypes.bool,
};

DefaultPropsComponent.defaultProps = {
  boolValue: false,
};

export default DefaultPropsComponent;

위와 같이 DefaultPropsComponent의 defaultProps라는 특수 변수를 사용하여 프로퍼티의 기본값을 정의하여 사용할 수 있다.

참고 : Do it! 리액트 프로그래밍 정석