Props

<aside> 👉🏿 props 받아오기

함수의 파라미터로 받아와서 사용할 수 있다.

</aside>

// MyComponent.js
const MyComponent = props => {
	return <div>제 이름은 {props.name}입니다.</div>
}

// App.js
const App = () => {
	return <MyComponent name={'남궁철'} />
}

<aside> 👉🏿 props의 기본값 지정

defaultProps로 기본값을 설정할 수 있다.

</aside>

MyComponents.defaultProps = {
  name: "철",
};

<aside> 👉🏿 Children

태그 사이의 내용을 보여주는 prop이다

</aside>

const MyComponents = (props) => {
  return (
    <>
      <div>안녕하세요 제이름은 {props.name}입니다.</div>
      <div>children 값은 {props.children}입니다.</div>
    </>
  );
};

const App = () => {
  return (
    <MyComponents name={"철"}>
      리액트
    </MyComponents>
  );
};

<aside> 👉🏿 구조분해할당으로 props 추출하기.

위에서 name이나 children 앞에 props를 붙혀서 사용했는데,

구조분해할당을 이용하면 name, children을 그대로 사용할 수 있다.

</aside>

const MyComponents = ({ name, children, favoriteNumber }) => {
  return (
    <>
      <div>안녕하세요 제이름은 {name}입니다.</div>
      <div>children 값은 {children}입니다.</div>
      <div>제가 좋아하는 숫자는 {favoriteNumber}입니다.</div>
    </>
  );
};

<aside> 👉🏿 proptype을 통한 props 검증하기

props의 타입을 지정할 수 있다.

isRequired를 사용시 필수로 입력받아야하는 props로 지정할 수 있다.

</aside>

MyComponents.propTypes = {
  name: PropTypes.string,
  favoriteNumber: PropTypes.number.isRequired,
};

<aside> 👉🏿 PropType의 종류

더 많은 PropType의 종류가 있으니 공식 문서를 참조하여 사용하자.

→ 공식 문서 링크

</aside>