티스토리 뷰

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,
};

 

728x90

'React' 카테고리의 다른 글

[React] React Native  (0) 2021.02.09
[React] 라이프 사이클  (0) 2021.02.03
[React] 주요 훅스  (0) 2021.02.03
[React] Class Component, Function Component  (0) 2021.02.03
[React] Webpack, Babel, Create React App  (0) 2021.02.03
댓글
댓글쓰기 폼
공지사항