Props
1. props 란?
properties의 줄임말이다.
props는 부모 컴포넌트로부터 자식 컴포넌트로 전달된 데이터를 의미한다.
props는 state와 달리 read-only 라는 것에 주의해야 한다.
2. 사용방법
먼저 예제를 보자.
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link
rel="stylesheet"
href="https://unpkg.com/@picocss/pico@1.*/css/pico.min.css"
/>
</head>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function Btn({text, fontSize = 30}) {
return (
<button style={{
backgroundColor:"black",
fontSize
}}>{text}</button>
)
}
function App() {
return (
<div>
<Btn text="Save Changes" fontSize={22} />
<Btn text="Continue" />
</div>
)
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>이런식으로 Btn 컴포넌트에 text와 fontSize를 전달해 줄 수 있다.
props 기본값 설정
방법 1 : 위 예제 처럼 'fontSize = 20' 이렇게 해 놓으면 fontSize를 넣지 않으면 저 기본값이 적용이된다.
방법 2 : defaultProps를 사용하면된다.
방법 1 같이 하지 않는다면 아래처럼 도 할 수 있다.
function Btn({text, fontSize = 30, comment}) {
return (
<>
<button style={{
backgroundColor:"black",
fontSize
}}>{text}
</button>
<span>{commnet}</span>
</>
)
}
Btn.defaultProps = {
comment : "hi"
}
Prop Types
이런식으로 props를 넘겨주다가 오타가 나거나 잘못된 타입의 값을 할당할 수도 있다.
function App() {
return (
<div>
<Btn text={99} fontSize="hi" /> // text와 fontSize 각각 잘못된 타입의 props를 할당
<Btn text="Continue" />
</div>
)
}
이러한 실수를 방지하기 위해 react 팀이 PropTypes라는 패키지를 제공해준다.
https://www.npmjs.com/package/prop-types
prop-types
Runtime type checking for React props and similar objects.. Latest version: 15.8.1, last published: a year ago. Start using prop-types in your project by running `npm i prop-types`. There are 52402 other projects in the npm registry using prop-types.
www.npmjs.com
npm i --save prop-types을 해주고
import PropTypes from 'prop-types'; // ES6이렇게 import해주면 된다.
컴포넌트 이름.propTypes = {} 이렇게 해주면 된다.
<script type="text/babel">
function Btn({text, fontSize = 30}) {
return (
<button style={{
backgroundColor:"black",
fontSize
}}>{text}</button>
)
}
Btn.propTypes = {
text : PropTypes.string,
fontSize: PropTypes.number
}
function App() {
return (
<div>
<Btn text="Save Changes" fontSize={22} />
<Btn text="Continue" />
</div>
)
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
'React-JS > 개념' 카테고리의 다른 글
| [React] styled-compoents (1) | 2023.02.20 |
|---|---|
| [React] react / react-dom (0) | 2023.02.16 |
| [React] Hook ( useState / useEffect ) (0) | 2023.02.11 |
| [React] Function and Class Components (0) | 2023.02.11 |
| [React] create react app (0) | 2023.02.10 |
