[React] 프로퍼티가 뭐야?

프로퍼티는 상위 컴포넌트(App)가 하위 컴포넌트(PropsExample)에 값을 전달할 때 사용합니다. 

 

import React, { Component } from 'react';
import PropTypes from 'prop-types';
 
class PropsExample extends Component {
  render() {
    const {
      boolValue,
      numValue,
      arrayValue,
      objValue,
      nodeValue,
      funcValue,
    } = this.props;
 
    return (
      <div>
        <h3>불리언값: {String(boolValue)}</h3>
        <h3>숫자값: {numValue}</h3>
        <h3>배열값: {arrayValue}</h3>
        <h3>객체값: {String(objValue)}</h3>
        <h3>노드값: {nodeValue}</h3>
        <h3>함수값: {funcValue}</h3>
      </div>
    );
  }
}

 

7행~12행까지 프로퍼티를 만들어줍니다.

17행~22행은 상위 컴포넌트로부터 전달받은 프로퍼티 값을 넣어줍니다.

 

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

 

위의 코드는 각각의 프로퍼티가 전달받은 수 있는 값을 지정해줍니다.

 

import React from 'react';
import './App.css';
import PropsExample from './03/PropsExample';
 
function App() {
  const array = [1, 2, 3];
  const obj = { name: '이름', age: 20 };
  const node = <h1>h1 태그 노드값 전달</h1>;
  const func = () => console.log('메서지');

 

프로퍼티로 전달해줄 값을 미리 만들어놓습니다.

 

  return (
    <div className="App">
      <PropsExample
        boolValue={true}
        numValue={1}
        arrayValue={array}
        objValue={obj}
        nodeValue={node}
        funcValue={func}
      />
    </div>
  );
}
 
export default App;

 

PropsExample에 선언해놓았던 프로퍼티와 같은 이름으로 변수들을 설정해줍니다.

 

결과 화면

값 설정 후 리액트를 실행시켜주면 위와 같은 화면을 볼 수 있습니다.