Props(전달속성)

컴포넌트 밖에서 주어지는 데이터

props는 부모 -> 자식으로 단방향(1-way) 흐름으로 전달된다.

• 컴포넌트에 설정된 임의의 JSX 속성(type, children 등)은 React에 의해 컴포넌트에 속성(props) 객체로 전달한다.
• 전달된 값은 props 객체의 각 속성으로 설정된다.
• 전달된 컴포넌트 속성 객체 props는 컴포넌트 내부에서 컴파일에 활용된다.
• 컴포넌트에 전달된 속성(props)객체는 읽기 전용(readonly)
  • 전달 받은 props 값을 수정하면 안된다.
  • 전달 받은 props 값을 수정하는 대신 컴포넌트 상태(state)를 활용
• 컴포넌트의 재사용성을 높임!!

props.children

• vue.js에 slot과 같은 개념
• data binding을 바깥(부모)에서 해준 것!!
• component에 content를 children이라는 속성명으로 전달하게 된다.
  - content란 <component>{ content }</component>

// parent component
const ParentComponent = () => {
  return (
    <ChildComponent>
      <h1> Hello </h1> /* props.children 값으로 보낸다. */
    </ChildComponent>
  )
}

// child component
const ChildComponent = (props) => {
  return (
    <div>
      { props.children } /* <h1> Hello </h1> 와 같다. */
    </div>
    )
}

props 타입 검사

애플리케이션의 규모가 커지면 수 많은 컴포넌트가 프로젝트에 사용되고, 팀원도 많아진다.
규모가 커짐에 따라 오류(버그)가 발생할 확률도 높아진다.
이런 문제를 사전에 차단하기 위해서는 컴포넌트에 전달되는 속성(props)가 올바른지 사전에 검사할 수 있어야 한다.

주의사항

• 규모가 큰 프로젝트에서는 PropTypes 모듈 사용은 적합하지 않다.
• 대신 TypeSCript를 사용할 것을 React 공식 문서는 적극 권장

PropTypes 모듈

직접 만든 커스텀 proTypes를 통해 props 속성 검사를 할 수 있지만. 자체적으로 React가 제공하는 PropTypes 모듈을 사용하자
npm i -D prop-types

• React는 v15.5부터 React.PropTypes를 분리하였으므로 PropTypes를 사용하려면 설치해줘야한다.
• prop-types를 import 후에 컴포넌트에 propTypes 속성을 추가한 후, 전달 속성 검사를 설정하는 객체를 할당한다.

import PropTypes from 'prop-types';

const Worker = ({ name, career, onCareerUp, isLeave }) => {
  return (
    ...jsx element
    )
}

/* 
Work 컴포넌트에 전달된 속성 props 유효성 검사 실행
ex:) PropTypes.string => String 유형 검사
	.isRequired => "필수 전달 속성"이 전달되지 않은 경우 오류를 출력하도록 설정
*/
Worker.propTypes = {
  name: PropTypes.string.isRequired,
  carrer: PropTypes.number.isRequired,
  onCareerUp: PropTypes.func.isRequired,
  isLeave: PropTypes.bool.isRequired,
}

export default Worker;

props 기본 값

컴포넌트에 전달할 속성을 모두 필수로 만들 필요는 없다.

• props 기본값을 설정하는 방법은 defaultProps 속성을 설정하는 것
  - propTypes 속성 설정과 매우 흡사하다.

const Worker = ({ name, career, onCareerUp, isLeave }) => {
  return (
    ...jsx element
    )
}

Worker.defaultProps = {
  name: '웅',
  career: 27,
}