Props
1. ๊ฐ์
๋ฆฌ์กํธ App๋ฅผ ๊ฐ๋ฐํ๋ ๊ฒ์ ๋ถ์ด๋นต์ ๋ง๋๋ ๊ฒ๊ณผ ๋น๊ตํ์ ๋ ๋ถ์ด๋นต ํ์ ์ปดํฌ๋ํธ, ๋ถ์ด๋นต ์ ์ฌ๋ฃ๋ props, ์์ฑ๋ ๋ถ์ด๋นต์ ๋ฆฌ์กํธ ์จ๋ฆฌ๋จผํธ๊ฐ ๋๋ค.
์ด์ค props์ ๋ฐ๋ผ ๊ฐ์ ์ปดํฌ๋ํธ๋ผ ํด๋ ๋ชจ๋ ๋ค๋ฅธ ๋ด์ฉ์ด ๋ค์ด๊ฐ ๋ฆฌ์กํธ ์จ๋ฆฌ๋จผํธ๋ฅผ ๋ง๋ค ์ ์๋ค. ํ์ง๋ง ๊ฐ์ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ๊ธฐ ๋๋ฌธ์ ์ ์ฒด์ ์ ํ์ ๊ฐ๋ค.
์ด์ฒ๋ผ props๋ ๊ฐ์ ๋ฆฌ์กํธ ์ปดํฌ๋ํธ์์ ๋์ ๋ณด์ด๋ ๊ธ์๋ ์๊น ๋ฑ์ ์์ฑ์ ๋ฐ๊พธ๊ณ ์ถ์ ๋ ์ฌ์ฉํ๋ ์ปดํฌ๋ํธ์ ์ ์ฌ๋ฃ๋ผ๊ณ ์๊ฐํ๋ฉด ๋๋ค.
2. props๋ ์ฝ๊ธฐ ์ ์ฉ
All React components must act like pure functions with respect to their props.
๋ฆฌ์กํธ ๊ณต์ ๋ฌธ์๋ ์์ ๊ฐ์ด props์ ์ฑ๊ฒฉ์ ์ค๋ช ํ๊ณ ์๋ค. ๊ณต์๋ฌธ์์๋ pure functions์ด๋ผ๋ ํจ์๊ฐ ๋์ค๋๋ฐ ๊ทธ๋ ๋ค๋ฉด pure functions์ด๋ผ๋ ๊ฒ์ ๋ฌด์์ผ๊น?
์๋์ ํจ์๋ฅผ ๋ณด์
function sum(a, b) {
return a + b;
}
์์ ํจ์ sum
์ ์ธ์ a
,b
์ ๊ฐ์ ๋ณ๊ฒฝํ์ง ์์ผ๋ฉด, ๊ฐ์ ์
๋ ฅ๊ฐ์ ๋ํด์๋ ํญ์ ๊ฐ์ ์ถ๋ ฅ๊ฐ์ ๋ธ๋ค. ์ด๋ฌํ ํจ์๋ฅผ Pureํ๋ค๊ณ ํ๋ค.
๋ฐ๋๋ก Pure์ ๋ฐ๋์ธ Impureํ ํจ์์ ์๋ฅผ ์ดํด๋ณด์
function widthdraw(account, amount) {
account.total -= amount;
}
์์ ํจ์๊ฐ ์คํ์ด ๋๋ฉด ์์ ์ ์ ๋ ฅ๊ฐ์ ๋ณ๊ฒฝํ๊ธฐ ๋๋ฌธ์ ์์ํ์ง ์๋ ํจ์๊ฐ ๋๋ค.
์์ํจ์์ ์์ํ์ง ์๋ ํจ์๋ฅผ ์ดํด๋ดค๋ค. ๋ค์ ์ ๋ฆฌํ์๋ฉด
๋ชจ๋ ๋ฆฌ์กํธ ์ปดํฌ๋ํธ๋ props๋ฅผ ์ง์ ๋ฐ๊ฟ ์ ์๊ณ (์ฝ๊ธฐ ์ ์ฉ), ๊ฐ์ props์ ๋ํด์๋ ํญ์ ๊ฐ์ ๊ฒฐ๊ณผ(๋ฆฌ์กํธ ์จ๋ฆฌ๋จผํธ)๋ฅผ ๋ณด์ฌ์ค๋ค.
3. props์ ๊ธฐ๋ณธ ์ฌ์ฉ๋ฒ
Parents ์ปดํฌ๋ํธ์์ Child ์ปดํฌ๋ํธ๋ก name
์ด๋ผ๋ ๊ฐ์ ์ ๋ฌํ๊ณ ์ ํ๋ ์ํฉ์ ๊ฐ์ ํ์. ๊ทธ๋ ๋ค๋ฉด ์๋์ ๊ฐ์ด ์ฝ๋๋ฅผ ์์ฑํด์ผ ํ๋ค.
// Parents.js;
import React from "react";
import Child from "./Child";
const Parents = () => {
return (
<div>
<Child name="HD" />
</div>
);
};
export default Parents;
// Child.js
import React from "react";
const Child = (props) => {
return <div>์ ์ด๋ฆ์ {props.name}์
๋๋ค.</div>;
};
export default Child;
Child.js ๊ฐ์ด Child ์ปดํฌ๋ํธ์๊ฒ ์ ๋ฌ๋๋ props๋ ํ๋ผ๋ฏธํฐ๋ฅผ ํตํ์ฌ ์กฐํํ ์ ์๋ค. props๋ ๊ฐ์ฒด ํํ๋ก ์ ๋ ๋ค๋ฉฐ, ๋ง์ฝ name
๊ฐ์ ์กฐํํ๊ณ ์ถ๋ค๋ฉด props.name
์ ์กฐํํ๋ฉด ๋๋ค.
4. ์ฌ๋ ค๊ฐ์ props์ ๊ตฌ์กฐ๋ถํด ํ ๋น
Parents ์ปดํฌ๋ํธ์์ name
๊ฐ ๋ฟ ์๋๋ผ age
, region
์ Child ์ปดํฌ๋ํธ์ ๋๊ฒจ์ฃผ๋ ์ํฉ์ ๊ฐ์ ํด๋ณด์. ๋ฟ๋ง ์๋๋ผ ๊ฐ์ฒด ํํ๋ก ์ ๋ฌ๋๋ props๋ฅผ ES6์ ๋ฑ์ฅํ ๊ตฌ์กฐ๋ถํด(๋น๊ตฌ์กฐํ) ํ ๋น ํํ์์ ์ฌ์ฉํด๋ณด์.
// Parents.js;
import React from "react";
import Child from "./Child";
const Parents = () => {
return (
<div>
<Child name="HD" age="29" region="ํ๊ตญ" />
</div>
);
};
export default Parents;
// Child.js
import React from "react";
// ๊ตฌ์กฐ๋ถํด ํ ๋น์ผ๋ก props๊ฐ๋ค์ ์ป์ ์ ์๋ค.
const Child = ({ name, age, region }) => {
return (
<div>
์ ์ด๋ฆ์ {name}์
๋๋ค. ๋์ด๋ {age}์ด๊ณ {region}์์ ์์ต๋๋ค.
</div>
);
};
export default Child;
props์ ๊ธฐ๋ณธ ์ฌ์ฉ๋ฒ
์ ๋ค๋ฅด๊ฒ Child ์ปดํฌ๋ํธ์ ํ๋ผ๋ฏธํฐ์์ ๊ตฌ์กฐ๋ถํด ํ ๋น ๋ฌธ๋ฒ์ ํตํด props๊ฐ๋ค์ ๋ถ๋ฌ์๋ค. ์ด์ ์๋ props.
๋ฅผ ์ฌ์ฉํด ๊ฐ๊ฐ์ ๊ฐ์ ๋ถ๋ฌ์์ง๋ง ๊ตฌ์กฐ๋ถํด ํ ๋น์ ํตํด ์กฐ๊ธ ๋ ๊ฐ๊ฒฐํ๊ฒ ์ฝ๋๋ฅผ ์์ฑํ ์ ์๋ค.
5. defaultProps๋ก ๊ธฐ๋ณธ๊ฐ ์ค์
๋ง์ฝ ์ ๋ฌ ๋ฐ์ props๊ฐ์ด ์์ผ๋ฉด ์ด๋กํ ๊น? ์ด๋ด๋๋ ์กฐ๊ฑด๋ถ ๋๋๋ง์ ํตํด ๊ฐ์ ์ค์ ํ ์ ์๊ณ defaultProps๋ฅผ ์ด์ฉํด ๊ธฐ๋ณธ๊ฐ์ ์ค์ ํ ์ ์๋ค. ์กฐ๊ฑด๋ถ ๋๋๋ง์ ๋ค๋ฅธ ์ฑํฐ์์ ์์ธํ ๋ค๋ฃจ๊ณ ์ด๋ฒ ์ฑํฐ์์๋ defaultProps๋ฅผ ์ฌ์ฉํด ๋ณด์.
์๋์ ์ฝ๋๋ฅผ ์ดํด๋ณด์.
// Parents.js;
import React from "react";
import Child from "./Child";
const Parents = () => {
return (
<div>
<Child name="HD" />
<Child />
</div>
);
};
export default Parents;
// Child.js
import React from "react";
const Child = ({ name }) => {
return <div>์ ์ด๋ฆ์ {name}์
๋๋ค.</div>;
};
Child.defaultProps = {
name: "์ด๋ฆ์ ์ค์ ํด์ฃผ์ธ์.",
};
export default Child;
Parents.js์์ ๋๊ฐ์ Child ์ปดํฌ๋ํธ๋ฅผ ํธ์ถํ๊ณ ์๋ค. ํ์ง๋ง ํ๋๋ name
๊ฐ์ด ์๊ณ ๋ค๋ฅธ ํ๋๋ ๊ฐ์ด ์๋ค.
name
๊ฐ์ด ์๋ ๊ฒฝ์ฐ Child.js์์๋ Child.defaultProps
๋ฅผ ์ฌ์ฉํด name
์ ๊ธฐ๋ณธ๊ฐ์ ์ง์ ํ๋ค. ์๋๋ ์ ์ฝ๋์ ๊ฒฐ๊ณผ์ด๋ค.

6. props.children
์ปดํฌ๋ํธ ํ๊ทธ ์ฌ์ด์ ๋ฃ๊ณ ์ถ์ ์จ๋ฆฌ๋จผํธ ๋๋ ๋ค๋ฅธ ์ปดํฌ๋ํธ๋ฅผ ์ถ๊ฐํ๊ณ ์ถ์ ๋ props.children
์ ์ฌ์ฉํ๋ฉด ๋๋ค. ๊ตฌ์กฐ๋ถํด ํ ๋น์ผ๋ก ๊ฐ๋จํ๊ฒ ์ฌ์ฉํด๋ ์ข๋ค.
์ปจํ ์ธ ์ ๋ด์ฉ์ด ๋ด๊ธด Content ์ปดํฌ๋ํธ๊ฐ Wrapper ์ปดํฌ๋ํธ๋ก ๊ฐ์ธ์ ธ ์๋ค๊ณ ๊ฐ์ ํด๋ณด์. ๊ทธ๋ ๋ค๋ฉด ์ฝ๋๋ ์๋์ ๊ฐ์ ๊ฒ์ด๋ค.
// Wrapper.js
import React from "react";
const Wrapper = () => {
return (
<div style={{ backgroundColor: "red", color: "white" }}>
<h1>Wrapper ์ปดํฌ๋ํธ ์
๋๋ค.</h1>
</div>
);
};
export default Wrapper;
// Content.js
import React from "react";
import Wrapper from "./Wrapper";
const Content = () => {
return <Wrapper>
<h2>Content ์ปดํฌ๋ํธ ์
๋๋ค.</h2>
</Wrapper>;
};
export default Content;

์์ ์ฝ๋๋ฅผ ์ดํด๋ณด์. Content ์ปดํฌ๋ํธ๊ฐ Wrapper ์ปดํฌ๋ํธ๋ก ๊ฐ์ธ์ฌ์๋ค. Content ์ปดํฌ๋ํธ์ Wrapper ์ปดํฌ๋ํธ ์ฌ์ด์๋ <h2>Content ์ปดํฌ๋ํธ ์
๋๋ค.</h2>
์ ์จ๋ฆฌ๋จผํธ๊ฐ ์์ง๋ง ํ๋ฉด์๋ ๋ํ๋์ง ์์๋ค.
์ ๊ทธ๋ด๊น? ๊ทธ ์ด์ ๋ <h2>Content ์ปดํฌ๋ํธ ์
๋๋ค.</h2>
๋ ํ๋์ props์ธ๋ฐ Wrapper ์ปดํฌ๋ํธ์์ ํด๋น props๋ฅผ ์ด๋์ ๋ฃ์์ง ์ ์ํ์ง ์์์์ด๋ค. ์ด๋ ํ์ํ ๊ฒ์ด ๋ฐ๋ก props.children
์ด๋ค.
๋ค์๊ณผ ๊ฐ์ด ์ฝ๋๋ฅผ ์์ ํ์.
// Wrapper.js
import React from "react";
const Wrapper = ({children}) => {
return (
<div style={{ backgroundColor: "red", color: "white" }}>
<h1>Wrapper ์ปดํฌ๋ํธ ์
๋๋ค.</h1>
{children}
</div>
);
};
export default Wrapper;
// Content.js
import React from "react";
import Wrapper from "./Wrapper";
const Content = () => {
return <Wrapper>
<h2>Content ์ปดํฌ๋ํธ ์
๋๋ค.</h2>
</Wrapper>;
};
export default Content;

์ด๋ฒ์๋ ์ฑ๊ณต์ ์ผ๋ก <h2>Content ์ปดํฌ๋ํธ ์
๋๋ค.</h2>
์ ๋ด์ฉ์ด ์ถ๋ ฅ๋์๋ค. ๋ค๋ฅธ์ ์ ์ฐพ์๋ณด์.
Wrapper ์ปดํฌ๋ํธ์ props๋ฅผ ๊ตฌ์กฐ๋ถํด ํ ๋น์ ํ์ฌ children
๊ฐ์ ๊ฐ์ ธ์๋ค. ๊ทธ๋ฆฌ๊ณ <h1>Wrapper ์ปดํฌ๋ํธ ์
๋๋ค.</h1>
์๋์ children
๋ฅผ ๋ฃ์ด์ฃผ์๋ค. ๊ทธ๋์ Content ์ปดํฌ๋ํธ์ <h2>Content ์ปดํฌ๋ํธ ์
๋๋ค.</h2>
์ด ๋ฐ๋ก ์๋์ ์์นํ๊ฒ ๋๋ค.
Wrapper.js์์ ์ฝ์๋ก children
๋ฅผ ์ฐ์ด๋ณด์ ๊ทธ๋ฌ๋ฉด ์๋์ ๊ฐ์ ๊ฐ์ฒด์ ๋ณผ ์ ์๋ค.

children
์๋ Content ์ปดํฌ๋ํธ์์ ์์ฑ๋ ๋ฆฌ์กํธ ์จ๋ฆฌ๋จผํธ๊ฐ ๊ฐ์ฒด ํํ๋ก ์กด์ฌํ๊ณ ์์์ ํ์ธํ ์ ์๋ค.
์ฃผ์ํ ์ ์ props.children
์ด ์๋ ๋ค๋ฅธ ์์์ ์ด๋ฆ์ผ๋ก ์ ์ธํ๋ฉด ์ํ๋ ๊ฒฐ๊ณผ๋ฌผ์ ์ป์ ์ ์๋ค.
7. Conclusion
props
์ ๋ํด ๊ณต๋ถํ๋ฉด์ ์์ํจ์๋ผ๋ ๊ฐ๋ ๋ ํจ๊ป ๋ฐฐ์ ๋ค.props
๊ฐ์ด ๋ณํํ์ง ์๋ ๋ค๋ ๊ฒ์ ์ฌ๋ฌ ํ๋ก์ ํธ๋ฅผ ์งํํ๋ฉด์ ์๊ณ ์์์ง๋ง ์ด๋ฐ ๊ฐ๋ ์ด ์์ํจ์์ ์ฐ๊ด์ด ์๋ค๋ ๊ฒ์ ์๊ฒ ๋์๋ค. ๊ทธ๋ฆฌ๊ณ ๋๊ฒจ๋ฐ๋props
์ ๊ฐ์ด ์๋ค๋ฉด ๋๋ ์ง๊ธ๊น์ง ์กฐ๊ฑด๋ถ ๋๋๋ง์ ํตํด ์ฝ๋๋ฅผ ์์ฑํ๋ค. ํ์ง๋ง ๋ค๋ฅธ ๋ฐฉ๋ฒ์ธdefaultProps
์ ๋ํด ์๊ฒ ๋์๊ณ ํ ๋ฒ์ฏค ์ฌ์ฉํด์ ๋ฆฌ์กํธ์ ๋ํ ์ง์์ ๋ํ์ผ ๊ฒ ๋ค. ์ฌ์คtypescript
๋ฅผ ๋ฆฌ์กํธ์ ๋์ ํ๋ค๋ฉด ํจ์ฌ ์ข์ ๋ฐฉ๋ฒ์ด ์์ง๋ง... ์ญ์๋typescript
๋ฅผ ๋ฐฐ์ด์ง ์ผ๋ง ์๋์๊ณ ๊ทธ ๋ํ ๊ธฐ๋ก์ ๋จ๊ธฐ์ง ์์ ๊ธฐ์ต์ ๋์ง ์๋๋ค...ใ ใ props.children
๋ฅผ ์ฝ์๋ก ์ฒ์ ์ฐ์ด๋ณด๋ ๊ฒ๋ ์ฌ๋ฏธ์์๋ค! ๊ทธ ์์ ๋ด์ฉ์ธ ๋ฆฌ์กํธ ์จ๋ฆฌ๋จผํธ๋ผ ์ ๊ธฐํ๋ค~ typescript๋ ์ ๋ฆฌ๋ฅผ ์ํ์๐
์ฐธ๊ณ
๋์ - ์ํ์ ์ฒ์ ๋ง๋ ๋ฆฌ์กํธ ๋ฆฌ์กํธ ๊ณต์๋ฌธ์ Components์ Props 5. props ๋ฅผ ํตํด ์ปดํฌ๋ํธ์๊ฒ ๊ฐ ์ ๋ฌํ๊ธฐ
๐ 2022-07-22
Last updated