Props
Props는 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용합니다.
Props의 특징
- 상위에서 하위로만 값을 전달하는 단방향 흐름을 가집니다.
- 하위에서 프로퍼티를 수정할 수 없다는 특징을 가집니다.
- props는 첫번째이자 유일한 인자입니다. ex) function Btn(props) {}
- 하위 컴포넌트에서 보낸 모든 것들을 갖는 오브젝트입니다.
Props를 사용한 예시
버튼을 만들 때, 동일한 style을 갖는 버튼 여러 개를 생성하고자 한다면 여러개의 버튼 컴포넌트를 생성하고 props를 통해 버튼 이름을 전달해줄 수 있습니다.
function Btn(props) {
console.log(props);
return (
<button
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
}}
>
{props.banana}
</button>
);
}
function App() {
return (
<div>
<Btn banana="Save Changes" />
<Btn banana="Continue" />
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
이때, props는 {}로 줄여서 사용 가능합니다.
function Btn({banana}) {
return (
<button
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
}}
>
{banana}
</button>
);
}
function App() {
return (
<div>
<Btn banana="Save Changes" />
<Btn banana="Continue" />
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
props를 여러 개 사용할 수도 있습니다. 아래와 같이 text와 big을 사용하게 되면, 첫번째 버튼에는 big에 true가 할당되고, 두번째 버튼에는 big에 undefined가 할당됩니다.
function Btn({text, big}) {
return (
<button
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
}}
>
{text}
</button>
);
}
function App() {
return (
<div>
<Btn text="Save Changes" big={true} />
<Btn text="Continue" />
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
만약 상위 컴포넌트와 하위 컴포넌트가 같은 프로퍼티를 가지면, 상위 컴포넌트의 값이 세팅됩니다. 따라서 아래의 경우에는 폰트 크기가 변경됩니다.
function Btn({text, big}) {
return (
<button
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
fontSize: big ? 18 : 16,
}}
>
{text}
</button>
);
}
function App() {
return (
<div>
<Btn text="Save Changes" big={true} />
<Btn text="Continue" />
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
Btn 컴포넌트 안에 프로퍼티를 만들어준다고 해서 자동으로 return에 들어가지 않습니다. 따라서 Btn의 프로퍼티 값으로 적어주어야 합니다.
function Btn({text, changeValue}) { // 2. Btn의 props를 등록
return (
<button
onClick = {changeValue} // 3. props 사용
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
}}
>
{text}
</button>
);
}
function App() {
const [value, setValue] = React.useState("Save Changes");
const changeValue = () => setValue("Revert Changes");
return (
<div>
<Btn text={value} changeValue={changeValue} /> // 1. Btn의 prop으로 text와 changeValue 생성
<Btn text="Continue" />
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
Prop Types
Prop Types는 어떤 Type의 Prop을 받고 있는지 체크해줍니다. 따라서 잘못된 Type을 전달해줄 때 이를 수정하는데 용이합니다.
Prop Types 사용
1. script src을 추가합니다.
<script src="https://unpkg.com/prop-types@15.6/prop-types.js"></script>2. prop에 type을 설정해줍니다.
Btn.propTypes = {
text : PropTypes.string,
fontSize : PropTypes.number
}Btn이라는 컴포넌트의 prop인 text와 fontSize의 타입을 각각 문자열과 숫자로 설정합니다.
두번째 버튼의 타입이 설정된 타입에서 벗어나므로, 콘솔 창에 경고 문구가 뜨는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<script crossorigin src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/prop-types@15.6/prop-types.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function Btn({text, fontSize}) {
console.log(text, "was rendered");
return (
<button
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
fontSize,
}}
>
{text}
</button>
);
}
Btn.propTypes = {
text : PropTypes.string,
fontSize : PropTypes.number
}
function App() {
return (
<div>
<Btn text="Save Changes" fontSize={18} />
<Btn text={14} fontSize={"Continue"} />
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>
https://reactjs.org/docs/typechecking-with-proptypes.html
위 링크에서 propTypes에 대한 다양한 사용 예시를 확인해볼 수 있습니다.
출처 : 노마드코더
'프론트엔드 > React' 카테고리의 다른 글
| [React] 8. Effects (0) | 2022.12.18 |
|---|---|
| [React] 6. Memo (0) | 2022.12.04 |
| [React] 4. State (0) | 2022.11.22 |
| [React] 3. JSX (0) | 2022.11.13 |
| [React] 2. Before React (0) | 2022.11.13 |