[React] props, defaultProps, propTypes

props란

컴포넌트 속성을 설정 할 때 사용하는 요소
부모 컴포넌트에서 자식 컴포넌트로 props를 전달 가능
properties의 줄임말 (속성)

// App.js
import React from "react";
import ChildrenComponent from "./ChildrenComponent";

const App = () => {
  return <ChildrenComponent name="react" />;
};

export default App;

// ChildrenComponent.jsx
import React from "react";

const ChildrenComponent = (props) => {
  return <div>name : {props.name}</div>;
};

export default ChildrenComponent;

-- 결과값 --

defaultProps

전달 받은 props의 기본값을 설정 가능
해당 기본값은 전달받은 값이 없을 경우 기본값으로 대체됨

// App.js
import React from "react";
import ChildrenComponent from "./ChildrenComponent";

const App = () => {
  return <ChildrenComponent name="react" />;
};

export default App;

// ChildrenComponent.jsx
import React from "react";

const ChildrenComponent = ({ name, value }) => {
  return (
    <div>
      name : {name} <br />
      value : {value}
    </div>
  );
};

ChildrenComponent.defaultProps = {
  name: "(unknown name)",
  value: "(unknown value)",
};

export default ChildrenComponent;

-- 결과값 --

props로 name을 전달받았습니다.
전달 받은 name은 받은 값 그대로 출력되었으며,
전달받지 않은 value값은 설정한 기본값으로 출력되었습니다.

 

propTypes

props의 타입을 지정하여 다른 타입의 값이 들어왔을 때 에러 코드를 발생 시킬 수 있습니다.

// App.js
import React from "react";
import ChildrenComponent from "./ChildrenComponent";

const App = () => {
  return <ChildrenComponent name="react" value={100} />;
};

export default App;

// ChildrenComponent
import React from "react";
import PropTypes from "prop-types";

const ChildrenComponent = ({ name, value }) => {
  return (
    <div>
      name : {name} <br />
      value : {value}
    </div>
  );
};

ChildrenComponent.defaultProps = {
  name: "(unknown name)",
  value: "(unknown value)",
};

ChildrenComponent.propTypes = {
  name: PropTypes.string,
  value: PropTypes.string,
};

export default ChildrenComponent;

-- 결과값 --

 

propTypes에서 isRequired를 뒤에 붙여서 전달받지 못하면 에러를 발생시킬 수 있습니다.

ChildrenComponent.propTypes = {
  name: PropTypes.string,
  value: PropTypes.string.isRequired,
};