Props

props란 properties를 줄인 표현으로, 컴포넌트 속성을 설정할 때 사용하는 요소이다

• 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해준다.
• 어떤 값을 컴포넌트에 전달해줘야 할 때 사용한다.(객체 형태로 전달된다.)
• 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 한다.

Props값 설정하기

function Btn(props) {
      console.log(props);
      return <button>Save Changes</button>;
    }

    function ConfirmBtn() {
      return <button>Confirm</button>
    }

    function App() {
      return (
	      <div>
	        <Btn text="Save Changes" /> 
	        <Btn text="Continue" />
	      </div>
      ) 
    };

React.js는 자동으로 넣는 props들을 오브젝트로 집어넣고, 이 오브젝트는 컴포넌트의 첫번째 인자로 주어진다.

즉, Prop는 우리가 보낸것들을 갖는 오브젝트이다.

Btn({text: "Save Changes"})

이러한 형태로 들어가게 되는 것이다.

props를 이용해서 UI를 달라지게 할 수 있다.

function Btn(props) {
      return (
			<button>
		      {props.text}
		    </button>;
			)
    }

    function App() {
      return (
      <div>
        <Btn text="Save Changes" /> 
        <Btn text="Continue" />
      </div>
      ) 
    };

이 컴포넌트는 text를 props로 받은 후 나타낸다.
하지만 이를 더 간단하게 하려면 비구조화 할당을 이용해서 props를 생략한다.

function Btn({ text }) {
      return (
			<button>
		      {text}
		    </button>;
			)
    }

Props 기본값 설정 : defaultProps

props를 따로 지정해주지 않아도 기본값으로 전달 해주는 props이다

컴포넌트명.defaultProps = {}

이런 식으로 사용된다

import React from 'react';

class MyComponent extends Component {
...
}

MyComponent.defaultProps = {
	name: '기본 이름',
	age: '21'
}

export default MyComponent;

클래스 내부에서 정의할 수 있다

Props 검증 : propTypes

컴포넌트의 필수 props를 지정하거나 타입을 지정할 때 사용한다

import propTypes from 'prop-types';
...
컴포넌트명.propTypes = {
	name: PropTypes.string // name props의 타입을 문자열로 지정
	age: PropTypes.number.isRequired // 필수로 존재해야 하며 반드시 숫자
}