ch03.Props(2)

비구조화 할당 문법을 통해 Props 내부 값 추출하기

• 이전까지는 props 값을 조회하기 위해서는 props키워드를 앞에 붙여서 꺼냈다.
• ES6의 비구조화 할당 문법을 사용하여 내부 값을 바로 추출
• MyComponent 수정
•  
• import React from "react"; //방법 1 const MyComponent = props => { const { name, children} = props; return ( <div> 안녕하세요 제 이름은 {name}입니다. <br /> children값은 {children}입니다. </div> ); }; export default MyComponent;
• 객체에서 값을 추출하는 문법이다(함수의 파라미터가 객체라면 그 값을 바로 비구조화해서 추출 가능)

• import React from "react";
  //방법 2
  const MyComponent = ({ name, children}) => {
      return (
          <div>
              안녕하세요 제 이름은 {name}입니다.
              <br />
              children값은 {children}입니다.
          </div>
      );
  };
  export default MyComponent;

PropTypes를 통한 props검증

• 컴포넌트의 필수 props를 지정하거나 props의 타입을 지정할 때는 propTypes를 사용한다.
• import구문을 사용해서 prop-types를 불러와야 된다.
• 해당 규칙을 지키지 않으면 에러가 난다.

• import React from "react";
  import PropTypes from "prop-types"; //PropsTypes를 사용하기 위한 import
  
  const MyComponent = ({ name, children }) => {
    return (
      <div>
        안녕하세요 제 이름은 {name}입니다.
        <br />
        children값은 {children}입니다.
      </div>
    );
  };
  MyComponent.propTypes = {
    name: PropTypes.string, //name값은 반드시 문자열 형태로 전달
  };
  export default MyComponent;

• 

• 

ProperTypes종류

• isRequired를 사용하여 필수 propTypes 설정

• 않았을 때 from "react";
  import PropTypes from "prop-types"; //PropsTypes를 사용하기 위한 import
  const MyComponent = ({ name, favoriteNumber, children }) => {
    //favoriteNumber를 prototype으로 주지 않았다. 
    //isRequired가 설정되어 있어서 콘솔에 경고 출력
    return (
      <div>
        안녕하세요 제 이름은 {name}입니다.
        <br />
        children값은 {children}입니다.
        <br />
        제가 좋아하는 숫자는 {favoriteNumber} 입니다.
      </div>
    );
  };
  MyComponent.propTypes = {
    name: PropTypes.string, //name값은 반드시 문자열 형태로 전달
    favoriteNumber: PropTypes.number.isRequired, //propsTypes를 지정하지 않았을때 경고 메시지를 띄어준다.
  };
  export default MyComponent;

• 

• 더 다양한 propTypes 종류가 있다 (array : 배열, bool : true/false, arrayOf : 특정 propType 이루어진 배열 등)

클래스형 컴포넌트에서 props 사용하기

• 클래스형 컴포넌트에서 props를 사용할 때는 render 함수에서 this.props를 조회하면 된다.
• defaultProps와 propTpyes는 똑같은 방식으로 설정 가능하다.

• import React from "react";
  import PropTypes from "prop-types"; //PropsTypes를 사용하기 위한 import
  
  class MyComponent extends Component {
    static defaultProps = {
      name: "기본 이름",
    };
    static propTypes = {
      name: PropTypes.string,
      favoriteNumber: PropTypes.number.isRequired,
    };
    render() {
      const { name, favoriteNumber, children } = this.props; //비구조화 할당
      return (
        <div>
          안녕하세요 제 이름은 {name}입니다.
          <br />
          children값은 {children}입니다.
          <br />
          제가 좋아하는 숫자는 {favoriteNumber} 입니다.
        </div>
      );
    }
  }
  export default MyComponent;

• 방법 2 : class내부에서 defaultProps와 propType 작성

• import React from "react";
  import PropTypes from "prop-types"; //PropsTypes를 사용하기 위한 import
  
  class MyComponent extends Component {
    static defaultProps = {
      name: "기본 이름",
    };
    static propTypes = {
      name: PropTypes.string,
      favoriteNumber: PropTypes.number.isRequired,
    };
    render() {
      const { name, favoriteNumber, children } = this.props; //비구조화 할당
      return (
        <div>
          안녕하세요 제 이름은 {name}입니다.
          <br />
          children값은 {children}입니다.
          <br />
          제가 좋아하는 숫자는 {favoriteNumber} 입니다.
        </div>
      );
    }
  }
  export default MyComponent;