컴포넌트(2) - 프로퍼티

프로퍼티

• 프로퍼티 :
  • 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용함
  • 프로퍼티 값은 수정할 수 없음

 

• 프로퍼티의 기본

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

  └ App 컴포넌트에서 프로퍼티를 Mycomp 컴포넌트에 전달했음
  └ 속성 형태로 전달되는 값을 프로퍼티라 함
  
  

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

  └ Mycomp 컴포넌트에서 name이라는 이름의 프로퍼티로 전달받은 "hoony"라는 문자열 값을
      render() 함수에서 참조할 수 있음
  └ render() 함수에서 this.props.name으로 프로퍼티값을 참조하고 있음
  
  * 중요한 점 :
  ┌ 프로퍼티가 상위 컴포넌트 → 하위 컴포넌트로 전달됨
  ├ App 컴포넌트가 MyComp 컴포넌트를 포함하고 있음
  └ 이것을 '단방향으로 데이터가 흐른다'라고 표현함
  
  

---

 

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

 

• 문자열형 프로퍼티 예시 (src/ex/PropsComp.jsx) :

  import React from 'react';
  import PropTypes from 'prop-types';
  
  class PropsComp extends React.Component {
      render() {
          return (
              <div className="message-container">
                  {this.props.name}  // ⓐ
              </div>
          );
      }
  }
  
  PropsComp.propTypes = {  // ⓑ
      name: PropTypes.string,  // ⓒ
  };
  
  export default PropsComp;

  └ 프로퍼티의 자료형을 선언하는 방법은 리액트에서 제공하는 prop-types를 이용함
  ┌ ⓐ : name 프로퍼티로 받은 문자열을 출력함
  ├ ⓑ : PropsComp의 propTypes라는 특수 변수를 사용하여 프로퍼티의 자료형을 정의함
  └ ⓒ : 프로퍼티의 자료형을 객체 형태로 지정하여 PropsComp.propTypes에 저장함
  
  
  
• 위 컴포넌트를 화면에서 확인하기 (/src/App.js) :

  import React from 'react';
  import PropComp from './ex/PropsComp';
  
  class App extends React.Component {
      render() {
          return (
              <PropComp name= "hoony"/>
          );
      }
  }
  
  export default App;

• 결과 :

 

---

• 다양한 프로퍼티 사용 :
  
  • 프로퍼티에 문자열을 전달할 때는 큰따음표(" ")를 사용함
  • 숫자형이나 불리언 등의 값을 전달할 때는 큰따음표를 사용할 수 없음
  • 문자열 외의 값은 따음표 대신 중괄호({ })를 사용함

 

• 다양한 프로퍼티 예시 (/src/ex/VariousComp) :

  import React from 'react';
  import PropTypes from 'prop-types';
  
  class VariousComp 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>
          );
      }
  }
  
  VariousComp.propTypes = {
      boolVal: PropTypes.bool,
      numVal: PropTypes.number,
      arrayVal: PropTypes.arrayOf(PropTypes.number),
      objVal: PropTypes.object,
      nodeVal: PropTypes.node,
      funcVal: PropTypes.func
  }
  
  export default VariousComp;​

  └ ⓐ : 객체 구조 분해 할당식을 사용하여 프로퍼티에 전달된 값들을 render() 함수 내의 지역 변수로 재정의함
      일종의 '프로퍼티 목록'의 역할을 함
  
  
  
• App 컴포넌트 수정 (/src/App.js) :

  import React from 'react';
  import VariousComp from './ex/VariousComp';
  
  class App extends React.Component {
      render() {
          return (
              <VariousComp
                  boolVal = {true}
                  numVal = {123}
                  arrayVal = {[1, 2, 3]}
                  objVal = {{ name: 'hoony', age: 25 }}
                  nodeVal = {<h1>node</h1>}
                  funcVal = {() => { console.log('msg'); }}
              />
          );
      }
  }
  
  export default App;

• 결과 :

 

• 더 간단히 하기

  import React from 'react'
  import VariousComp from './ex/VariousComp';
  
  class App extends React.Component {
      render() {
          const array = [1, 2, 3];
          const obj = { name: 'hoony', age: 25 };
          const node = <h1>node</h1>
          const func = () => { console.log('msg'); };
          
          return (
              <VariousComp
                  boolVal = {true}
                  numVal = {123}
                  arrayVal = {array}
                  objVal = {obj}
                  nodeVal = {node}
                  funcVal = {func}
              />
          );
      }
  }
  
  export default App;​

  └ 결과는 위와 똑같이 나옴
  └ 배열, 객체, 노드, 함수를 변수에 담아 전달했음

 

---

 

• 불리언 프로퍼티 사용 :
  • 불리언은 true 또는 false만 정의할 수 있는 특수한 자료형
  • 불리언값은 특별한 방법으로 전달할 수 있음
    • true의 경우 프로퍼티의 이름만 선언해도 전달할 수 있음
    • false의 경우 이름을 생략하면 됨

 

• 프로퍼티에 true를 전달한 예시 :

  <BoolCom boolVal />​

• 프로퍼티에 false를 전달한 예시 :

  <BoolCom />​

 

• 불리언 프로퍼티 예시 (/src/ex/BoolCom.jsx) :

  import React from 'react';
  
  class BollCom extends React.Component {
      render() {
          const msg = this.props.message ? 'A 실행' : 'B 실행';
          return (
              <div className = "message-container">
                  {msg}
              </div>
          );
      }
  }
  
  export default BoolCom;

• App 컴포넌트 수정 (/src/App.js) :

  import React from 'react';
  import BoolCom from './ex/BoolCom';
  
  class App extends React.Component {
      render() {
          return (
              <div>
                  <div><b>A 선택:</b><BoolCom message /></div>
                  <div><b>B 선택:</b><BoolCom /></div>
              </div>
          );
      }
  }
  
  export default App;

• 결과 :

 

---

 

• 객체형 프로퍼티 사용 :
  • 객체는 여러 값을 저장할 수 있는 자료형

 

• 객체형 프로퍼티 예시 (/src/ex/ObjComp.jsx) :

  import React from 'react';
  import ProtoTypes from 'prop-types';
  
  class ObjComp extends React.Component {
      render() {
          const {
              objVal
          } = this.props;
          
          return (
              <div>
                  <div>객체값 : {String(Object.entries(objVal))}</div>  // ⓐ
              </div>
          );
      }
  }
  
  ObjComp.propTypes = {
      objVal: PropTypes.shape({  // ⓑ
          name: PropTypes.string,
          age: PropTypes.num
      })
  }
  
  export default ObjComp;

  └ ⓐ : 객체를 문자열로 변환하여 출력함
  └ ⓑ : 객체 프로퍼티의 자료형은 PropTypes의 shape를 사용하여 정의함

 

• 위 예시에서 필수 프로퍼티를 추가하여 수정 (/src/ex/ObjComp.jsx) :

  import React from 'react';
  import PropTypes from 'prop-types';
  
  class ObjComp extends React.Component {
      render() {
          const {
              objVal,
              requiredVal
          } = this.props;
          
          return (
              <div>
                  <div>객체값 : {String(Object.entries(objVal))}</div>
                  <div>필수값 : {requiredVal}</div>
              </div>
          );
      }
  }
  
  ObjComp.propTypes = {
      objVal: PropTypes.shape({
          name: PropTypes.string,
          age: PropTypes.number
      }),
      requiredVal: PropTypes.string.isRequired  // ⓐ
  }
  
  export default ObjComp;

  └ ⓐ : 특수 변수 isRequired를 사용하여 requiredVal을 필수 프로퍼티로 지정했음

 

• App 컴포넌트 수정 (/src/App.js) :

  import React from 'react';
  import ObjComp from './ex/ObjComp';
  
  class App extends React.Component {
      render() {
          return (
              <div>
                  <ObjComp
                      objVal = {{ age : '25살' }}
                  />
              </div>
          );
      }
  }
  
  export default App;​

• 결과 :

└ 첫번째 경고 메시지는 age에 숫자가 아닌 문자열을 대입하여 나타났음

└ 두번째 경고 메시지는 필수 프로퍼티로 지정한 requiredVal에 값이 전달되지 않았기 때문에 나타났음

 

• App 컴포넌트 수정 - 오류 없애기 (/src/App.js) :

  import React from 'react';
  import ObjComp from './ex/ObjComp';
  
  class App extends React.Component {
      render() {
          return (
              <div>
                  <ObjComp
                      objVal = {{ age : 25 }}
                      requiredVal = "가나다라마바사"
                  />
              </div>
          );
      }
  }
  
  export default App;​

• 결과 :

 

---

 

• 프로퍼티에 기본값 지정 :
  • 프로퍼티에 기본값을 지정할 때는 기본값을 지정할 컴포넌트의 defaultProps값을 이용하면 됨

 

• 프로퍼티 기본값 예시 (/src/ex/DefaultComp.jsx) :

  import React from 'react';
  import PropTypes from 'prop-types';
  
  class DefaultComp extends React.Component {
      render() {
          let msg1 = '';
          if (this.props.boolVal === false) {
              msg1 = 'boolVal 기본값은 false';
          }
          let msg2 = '';
          if (this.props.boolValNotDefault === false) {
              msg2 = 'boolValNotDefault 기본값은 false';
          }
          
          return (
              <div className = "message-container">
                  {msg1}
                  {msg2}
              </div>
          );
      }
  }
  
  DefaultComp.propTypes = {
      boolVal : PropTypes.bool,
      boolValNotDefault : PropTypes.bool
  };
  
  DefaultComp.defaultProps = {  // ⓐ
      boolVal : false
  };
  
  export default DefaultComp;

  └ 불리언 프로퍼티를 사용할 때 프로퍼티를 생략하면 undefined가 전달됨
  └ ⓐ : 특수 변수 defaultProps를 사용하여 프로퍼티의 기본값을 정의했음

 

• App 컴포넌트 수정 (/src/App.js) :

  import React from 'react';
  import DefaultComp from './ex/DefaultComp';
  
  class App extends React.Component {
      render() {
          return (
              <div>
                  <DefaultComp />
              </div>
          );
      }
  }
  
  export default App;​

• 결과 :

 

---

 

• 자식 프로퍼티 사용

  <div>
      <button>
          버튼
      </button>
  </div>​

  └ 이와 같이 중간에 노드를 배치하는 표현식이 있음
  └ JSX에서는 컴포넌트 하위에 배치한 노드를 하위 컴포넌트에서 프로퍼티로 접근할 수 있게 해줌

 

• 자식 프로퍼티 예시 (/src/App.js) :

  import React from 'react';
  import Child from './ex/Child';
  
  class App extends React.Component {
      render() {
          return (
              <div>
                  <Child>
                      <div><span>자식 노드</span></div>
                  </Child>
              </div>
          );
      }
  }
  
  export default App;​

  └ App 컴포넌트에 포함시킨 Child 컴포넌트 하위에 자식 노드를 배치함

 

• Child 컴포넌트 예시 (/src/ex/Child.jsx) :

  import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  
  class Child extends Component {
      render() {
          return <div>{this.props.children}</div>
      }
  }
  
  Child.propTypes = {
      children : PropTypes.node
  };
  
  export default Child;

  └ {this.props.children} 과 같은 방법으로 <div><span>자식 노드</span></div>를 받을 수 있음
• 결과 :

 

• 별도의 프로퍼티를 통해 자식 노드를 전달하는 방법 (/src/App.js) :

  import React from 'react';
  import Child from './ex/Child';
  
  class App extends React.Component {
      render() {
          return (
            <Child
              children = {<div><span>자식노드</span></div>}
            />
          );
      }
  }
  
  export default App;​