[React] Props 기초

개념

JSX는 컴포넌트 간 속성(매개변수)을 전달할 때는 props(properties)라는 개념을 사용한다.

 

문법

• 주의: 넘겨 받은 props(속성값)은 read-only 이므로 값을 수정하고 싶다면 반드시 새로운 state에 할당한 후 사용한다(예시3)

<컴포넌트명 속성명=속성값> ...  </컴포넌트명>

 

예시1: Object로 묶어서 전달

• App 컴포넌트에서 TestComponent 컴포넌트로 myProp1="citron", myProp2="banana" 속성값을 넘겨줌

 

예시2: 속성 각각 전달

• <TestComponent>에서 작성된 속성명(myProp1, myProp2)과 TestComponent.js에서 작성된 매개변수의 이름이 일치해야 한다
• TestComponent.js에서 받고싶은 속성명만 명시해도 된다
  예) {myProp1, myProp2} → {myProp1}

 

예시3: 넘겨받은 props를 재할당하여 사용

 

prop-types: 속성(prop) type 체크

속성(prop)을 전달할때 의도한 값이 전달되지 않는 경우가 발생할 수 있다. 이를 방지하기 위해 prop-types 라이브러리를 사용한다.

잘못된 값이 전달되어도 프로그램이 멈추거나 exception이 발생하는 것은 아니지만, console 창에 Warning을 띄워준다.

 

1) 설치

터미널을 열고 아래 문구를 실행한다

npm -i prop-types

 

2) 설치 확인

package.json 파일의 "dependencies"에 "prop-types": "버전"이 추가되었는지 확인한다

 

3) 문법과 사용

• 라이브러리 import

import PropTypes from "prop-types";

• 문법

컴포넌트.propTypes = {
    속성1: PropTypes.타입.옵션,
    속성2: PropTypes.타입.옵션,
    ...
}

• 예시

TestComponent.js에서 myProp1과 2 모두 string 타입을 받아야 한다고 명시함

 

 

TestComponent.js

import React from 'react';
import PropTypes from "prop-types";

const TestComponent = ({myProp1, myProp2}) => {
    return (
        <div>
            <div>name: {myProp1}</div>
            <div>age: {myProp2}</div>
        </div>
    )
}

TestComponent.propTypes = {
    myProp1: PropTypes.string.isRequired, // myProp1 속성의 타입은 string 명시
    myProp2: PropTypes.string.isRequired // myProp2 속성의 타입은 string 명시
}

export default TestComponent;

App.js

TestComponent.js에서 myProp2의 타입은 string으로 명시하였으나 number 타입인 20을 전달함

import React from "react";

const App = () => {
  const hello = "Welcome to Citron Banana Blog!"

  return (
    <div>    
      <h1>{hello}</h1>
      <TestComponent myProp1="citron" myProp2={20}>     
    </div>
  );
}

export default App;

Console 창 Warning Message

myProp2는 string이 기대되나, number가 전달되었다는 Warning이 console에 전달됨 

 

4) More Study

타입에 대해 검사할 수 있는 요소는 isRequired 외에 여러가지가 있다. 이에 대해서는 추후 prop-types 편에서 학습한다.

https://ko.reactjs.org/docs/typechecking-with-proptypes.html

PropTypes와 함께 하는 타입 검사 – React