props값 전달, propTypes

Jihyun-Jeon·2022년 2월 17일

React

목록 보기

2/26

🔶props

: 부모 컴포넌트로 부터 자식 컴포넌트에게 데이터를 보낼 수 있게 해주는 방법

🔶prop 전달하기

컴포넌트 실행하면서 여러 props를 하나의 객체로 묶어서 전달됨.
prop으로 함수를 전달할 수도 있음.

  function App() {
      return (
        <div>
          <Btn title="save1" color="blue" idx="first" />
          <Btn title="save2" color="red" />
        </div>
      );
    }

🔶prop 전달받기

전달받는 컴포넌에선 하나의 객체로 prop을 전달받음.
객체안의 프로퍼티값을 각각 변수로 할당하여 편하게 사용하는 편임(구조분해할당)

import PropTypes from "prop-types";

// props = {title:"save1" , color:"blue" , idx :"first"} 이거임!

    function Btn({ title, color, idx }) {
      return (
        <div>
          <button style={{ color, backgroundColor: 'yellowgreen' }}>
            {title}
          </button>
          <span>{idx}</span>
        </div>
      );
    }

<prop 받는 법>

	* Btn에서 전달받은 props={title : "save1" , color : "blue"}; 이런 형태임.
    
    * 구조분해할당 활용한다면
     {title , color } = {title : "save1" , color : "blue"};
     const title = prop.title; // title을 쓰면 바로 "save1"이 나옴
     const color = prop.color; // color을 쓰면 바로 "blue"가 나옴

🔶prop의 기본값 설정하는 법

prop을 전달받는 컴포넌트에서 defaultProps를 설정해줌.
:idx값이 없으면 기본값으로 "second"가 들어가게 됨.

 Btn.defaultProps = {
      idx: 'second',
    };

자바스크립트 문법 이용
:prop을 받는 컴포넌트에서 prop에 값을 직접 설정해줌.

 function Btn({ title, color, number = "second" }) {
        return (
            <span>{number}</span>
        );
      }

🔶prop의 type을 지정하기

1. prop-types 라이브러리를 사용하여 설치함.

1. npm i prop-types 로 터미널에 설치
2. <script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>

2. proptype 설명

: isRequired 붙이면 prop값 없을시 콘솔에 경고창 뜸 (코드의 실행을 막진 않음)

 Btn.propTypes = {
        title: PropTypes.string.isRequired,
        color: PropTypes.string,
        number: PropTypes.number,
      };

3. 코드예제

import PropTypes from "prop-types";

 function App() {
        const [value, setValue] = React.useState("Save Changes");
        return (
          <div>
            <Btn title={value} color="blue" />
            <Btn title={12} /> 
            // 문제1. title값의 타입이 string이 아니라 number임.
          	// 문제2. color값은 필수값인데 값이 없음
          </div>
        );
      }

      Btn.propTypes = {
        title: PropTypes.string,
        color: PropTypes.string.isRequired,
      };

      function Btn({ title, color }) {
        return (
          <div>
            <button style={{ backgroundColor : color }}>{title}</button>
          </div>
        );
      }