props 란?
- 프로퍼티(props, properties) 라고 한다.
- 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용한다.(단방향 데이터 흐름을 갖는다.)
- 프로퍼티는 수정할 수 없다는 특징이 있다.(자식 입장에서는 Read-Only 데이터이다.)
결과물
예제 코드
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function Btn({ text, fontSize = 12 }) {
return (
<button
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
fontSize: fontSize,
}}
>
{text}
</button>
);
}
Btn.propTypes = {
text: PropTypes.string.isRequired,
fontSize: PropTypes.number,
};
function App() {
return (
<div>
<Btn text={"Save Changes"} fontSize={18} />
<Btn text={"Continue"} />
</div>
);
}
ReactDOM.render(<App />, root);
</script>
</html>
props 사용법
1. 프로퍼티 넘기기
function App() {
return (
<div>
<Btn text={"Save Changes"} fontSize={18} />
<Btn text={"Continue"} />
</div>
);
}- App 컴포넌트에서 Btn 컴포넌트에 text의 값인 {"Continue"}가 전달된다.
- Btn 컴포넌트에서 파라미터로 props 객체를 받게 된다.
- text 만 쓰면 1개, fontSize도 쓰면 2개가 넘어간다.
- 두 번째 버튼(Continue)은 fontSize가 없으므로 undefined가 찍힌다.
로그를 찍어보면 Object에 key, value 형식으로 데이터가 넘겨받는 것을 확인할 수 있다.
function Btn(props) {
...이런 식으로 props 를 파라미터로 받아서 props.text로 값을 뽑아쓸 수 도 있지만 가독성 및 코드의 질을 고려해서 {}에 사용할 값을 바로 받아서 사용하도록 하자.
function Btn({ text, fontSize = 12 }) {
...2. 프로퍼티 타입 지정
// 프로퍼티 타입을 지정해주기 위해 사용 한다.
import PropTypes from 'prop-types'
or
<script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>
Btn.propTypes = {
text: PropTypes.string.isRequired,
fontSize: PropTypes.number,
};- 컴포넌트의 propTypes를 통해서 위와 같은 방식으로 타입 지정을 해줄 수가 있다.
- text는 String형, fontSize는 number 형식으로 다른 값이 넘어가면 에러를 띄운다.
- isRequired 를 붙여주면 반드시 입력해줘야하는 특성을 가진다. 자바의 @NotNull과 비슷하다.
Dare mighty things!