Props

자료형 선언은 'props-types' 를 import 해 사용한다. 이름은 PropsType이다.

import React from 'react';
import PropsType from 'prop-types'; // prop-type 임포트 해야함

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

// PropsComponent 의 prototype 에 props 에대한 자료형 선언
PropsComponent.PropsType = {
  name: PropsType.string,
};
// 상수선언

export default PropsComponent;

 

단방향 데이터 흐름에서 상위 에서 데이터를 내려보낼때는 속성 값으로 내려보낸다.

import React from 'react';
import PropsComponent from './03/PropsComponent';

class App extends React.Component {
  render() {
    return (
      <div>
        <PropsComponent name="두잇!" /> //<<<
      </div>
    );
  }
}

export default App;

---

문자열 외의 값은 {} 를 사용한다.

 

 

하위 컴포넌트에서 props 를 구조분해 할당하여 사용 중

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

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

ChildComponent.PropsType = {
  boolValue: PropsType.bool,
  numValue: PropsType.number,
  arrayValue: PropsType.array,
  objValue: PropsType.object,
  nodeValue: PropsType.node,
  funcValue: PropsType.func,
};

export default ChildComponent;

 

상위에서 내려보낼때 주로 변수를 선언하여 내려보냄

import React from 'react';
import ChildComponent from './03/ChildComponent';

class App extends React.Component {
  render() {
    const array = [1, 2, 3];
    const obj = { name: '제목', age: 28 };
    const node = <h1>노드</h1>;
    const func = () => {
      console.log('메시지');
    };
    return (
      <div>
        <ChildComponent
          boolValue={true}
          numValue={1}
          arrayValue={array}
          objValue={obj}
          nodeValue={node}
          funcValue={func}
        />
      </div>
    );
  }
}

export default App;

---

boolean 프러퍼티

boolean 값을 이용한 메세지 출력

 

기본 값 지정은 defaultProps 로 한다.

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

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

DefaultPropsComponent.PropsTypes = {
  boolValue: PropsTypes.bool,
  boolValueWithDefault: PropsTypes.bool,
};

DefaultPropsComponent.defaultProps = {//<<<기본 값을 정의한 모습
  boolValue: false,
};

export default DefaultPropsComponent;

데이터를 내려보내는 모습

import React from 'react';
import DefaultPropsComponent from './03/DefaultPropsComponent';

class App extends React.Component {
  render() {
    return (
      <div>
        <div>
          <DefaultPropsComponent boolValue={true} boolValueWithDefault={false} />
        </div>
      </div>
    );
  }
}

export default App;

---

하위 컴포넌트에 표현식 지정

import React, { Component } from 'react';

class BooleanComponent extends Component {
  render() {
    const message = this.props.bord ? '놀러가자' : '하던 일 염심히 하기';
    return <div className="message-container">{message}</div>;
  }
}

export default BooleanComponent;

 

bord 에 값을 주면 true , 아니라면 false >> undefined 속성 이용 중

import React from 'react';
import BooleanComponent from './03/BooleanComponent';

class App extends React.Component {
  render() {
    return (
      <div>
        <div>
          <BooleanComponent bord />
        </div>
        <div>
          <BooleanComponent />
        </div>
      </div>
    );
  }
}

export default App;

---

Object 프러퍼티

 

자료형의 정의 : PropsType 의 shape 로 한다.

필수 프러퍼티는 PropsType 에 선언한 자료형에 isRequired 를 추가

 

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

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

ChildComponent2.PropsType = {
  objValue: PropsType.shape({
    name: PropsType.string,
    age: PropsType.number,
  }),
  requiredStringValue: PropsType.string.isRequired,
};

export default ChildComponent2;

상위에서 자식 컴포넌트 등록 후 데이터를 내려가는 모습

import React from 'react';
import ChildComponent2 from './03/ChildComponent2';

class App extends React.Component {
  render() {
    return (
      <div>
        <div>
          <ChildComponent2
            objValue={{ name: 'soomin', age: 20 }}
            requiredStringValue="필수문자열"
          />
        </div>
      </div>
    );
  }
}

export default App;

---

자식 프러퍼티사용

 

변수에 node 를 주고서 propsTypes 로 설정을 해도 괜찮지만, 부모 컴포넌트에서 하위컴포넌트를 선언할 경우 자식 컴포넌트에서 가져올 수도 있다.

 

children 속성으로 가져온다.

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

class ChildProperty extends Component {
  render() {
    return <div>{this.props.children}</div>;
  }
}

ChildProperty.propTypes = {
  children: PropTypes.node,
};

export default ChildProperty;

 

 

import React from 'react';
import ChildProperty from './03/ChildProperty';

class App extends React.Component {
  render() {
    return (
      <div>
        <ChildProperty>
          <div>
            <span>자식노드</span>
          </div>
        </ChildProperty>
      </div>
    );
  }
}

export default App;