[React] property 프로퍼티

프로퍼티란?

프로퍼티는 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용한다. -> '단방향으로 데이터가 흐른다.'

이때 프로퍼티 값은 수정할 수 없다는 특징이 있다. 

값을 전달 시 속성의 형태로 전달한다.

 

기초 예시

App.js

function App() {
  return (
    <div className='App'>
      <MyComponent name='message' />
    </div>
  );
}

MyComponent.js

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

---

prop-types 사용하기

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

이유 : 리액트 엔진이 프로퍼티로 전달하는 값의 변화를 효율적으로 감지할 수 있고, 개발자가 실수로 지정되지 않는 자료형을 프로퍼티에 전달하려고 할 때 경고 메시지로 알려주기 때문이다.

기초 예시

App.js : 위와 동일

PropsComponent.jsx

import PropTypes from 'prop-types';

class PropsComponent extends React.Component {
  render() {
    return <div>{this.props.name}</div>;
  }
}

PropsComponent.propTypes = {
  name: PropTypes.string,
};

export default PropsComponent;

만약 필수 프로퍼티를 사용하려면 .string 뒤에 .isRequired를 이용한다.

defaultProps 사용하기

만약 프로퍼티에 기본값을 지정하고 싶다면 defaultProps를 이용한다.

PropsComponent.defaultProps = {
  boolVal: false,
};

---

다양한 프로퍼티 사용하기

프로퍼티에 문자열 외의 값을 전달하려면 따옴표 대신 중괄호({})를 사용해야 한다. 

App.js

function App() {
  return (
    <div className='App'>
      <PropsComponent
        boolVal={true}
        numVal={2}
        arrayVal={[1, 2, 3]}
        objVal={{ name: '제목', age: 26 }}
        nodeVal={<h1>노드</h1>}
        funcVal={() => {
          console.log('funVal 입니다');
        }}
      />
    </div>
  );
}

PropsComponent.jsx

class PropsComponent extends React.Component {
  render() {
    const { boolVal, numVal, arrayVal, objVal, nodeVal, funcVal } = this.props;
    return (
      <div>
        <span>불리언값 : {boolVal}</span>
        <span>숫자값 : {numVal}</span>
        <span>배열값 : {arrayVal}</span>
        <span>객체값 : {String(objVal)}</span>
        <span>노드값 : {nodeVal}</span>
        <span>함수값 : {String(funcVal)}</span>
      </div>
    );
  }
}

PropsComponent.propTypes = {
  boolVal: PropTypes.bool,
  numVal: PropTypes.number,
  arrayVal: PropTypes.arrayOf(PropTypes.number),
  objVal: PropTypes.object,
  nodeVal: PropTypes.node,
  funcVal: PropTypes.func,
};

객체 구조 분해 할당식을 사용하여 프로퍼티에 전달된 값들을 render() 함수 내의 지역 변수로 재정의했다. 이렇게 하면 this.props.boolVal에서 this.props 없이 boolVal로 만으로 프로퍼티에 접근 가능하다. 또한 이 방법은 '프로퍼티' 목록의 역할을 하므로 개발을 할 때 참고하기도 좋다.

 

object의 경우 두 개의 중괄호를 사용한다. 실무에서는 개발자 간의 실수를 줄이기 위해 변수에 객체를 담아 전달하는 방식을 사용한다.

불리언 프로퍼티 사용하기

boolean : true 또는 false만 정의할 수 있는 특수한 자료형이다. 불리언의 위와 같은 방식으로 전달하는 방식과 또 다른 방식이 있다.

true의 경우 프로퍼티의 이름만 선언해도 전달할 수 있고, false의 경우 이름을 생략하면 된다.

자바스크립트에서 undefined와 false는 조건문에서 동일하게 취급된다. 즉 프로퍼티를 생략하면 undefined가 전달된다.

(헷갈리는 부분 : 조건문에서 동일하게 실행될 뿐 false != undefined이다!) (실무에서 자주 사용하기 꼭 알아두기!)

App.js

function App() {
  return (
    <div className='App'>
      {/* true인 경우 */}
      <div>지루할 때 : <PropsComponent bored /></div>
      {/* false인 경우 */}
      <div>즐거울 때 : <PropsComponent /></div>
    </div>
  );
}

export default App;

PropsComponent.jsx

class PropsComponent extends React.Component {
  render() {
    const message = this.props.bored ? 'True' : 'False';
    return <div>{message}</div>;
  }
}

export default PropsComponent;

객체형 프로퍼티 사용하기

객체 : 여러 값을 저장할 수 있는 자료형이다. 

PropsComponent.jsx

class PropsComponent extends React.Component {
  render() {
    const { objVal } = this.props;
    return <div>객체값 : {String(Object.entries(objVal))}</div>;
  }
}

PropsComponent.propTypes = {
  objVal: PropTypes.shape({
    name: PropTypes.string,
    age: PropTypes.number,
  }),
};

• 내장 함수 String()과 Object.entries()를 사용하여 객체를 문자열로 반환하여 출력한다.
• 객체 프로퍼티 자료형은 PropTypes의 shape를 사용하여 정의한다. 이렇게 하면 객체 목록을 한눈에 확인할 수 있기 때문이다.

자식 프로퍼티 사용하기

JSX는 컴포넌트 하위에 배치한 노드를 하위 컴포넌트에서 프로퍼티로 접근할 수 있게 해준다. 

App.js -> ChildProp.jsx : Child 컴포넌트 하위에 자식 노드를 배치하고자 한다.

App.js

function App() {
  return (
    <div className='App'>
      <ChildProp>
        <div><span>자식 노드</span></div>
      </ChildProp>
    </div>
  );
}

ChildProp.jsx

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

---

참고) React Native Props

2021.09.04 - [React Native] - [React Native] props

[React Native] props