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,
};
'React' 카테고리의 다른 글
[React] ToDo List 만들기 (0) | 2023.04.25 |
---|---|
[React] JSX (0) | 2023.04.18 |
[React] React Native (0) | 2021.02.09 |
[React] 라이프 사이클 (0) | 2021.02.03 |
[React] 주요 훅스 (0) | 2021.02.03 |