๋ฐฉ๊ธ es6 ํด๋์ค๋ฅผ ์ฌ์ฉํ์ฌ ์ ์๋ ์ผ๋ถ ๋ฐ์ ๊ตฌ์ฑ ์์๋ฅผ ๊ต์ฒดํ์ผ๋ฉฐ ์ด์ ReactNode๊ฐ ์๋ ๋ฐ์ ์ํ ๋น์ ์ฅ ๊ตฌ์ฑ ์์(๊ทธ๋ฅ ๊ธฐ๋ฅ์)์ ๋ํ ๊ฒฝ๊ณ ๋ฅผ ๋ฐ๊ณ ์์ต๋๋ค.
Warning: Failed propType: Invalid prop `Loader` supplied to `Picture`, expected a ReactNode.
React.PropTypes.node
๋ฅผ ์ฌ์ฉํ์ฌ ์ผ๋ถ ๊ตฌ์ฑ ์์์ ์ ํจ์ฑ์ ๊ฒ์ฌํ์ง๋ง ์ด์ PropTypes.oneOfType([ PropTypes.node, PropTypes.func ])
๋ฅผ ์ฌ์ฉํด์ผ ํฉ๋๋ค. "์ด๊ฒ์ ๊ตฌ์ฑ ์์๋ก ๋ ๋๋ง๋ ์ ์๋ ๋ชจ๋ ๊ฒ์ด ๋ ์ ์์ต๋๋ค"๋ผ๊ณ ๋งํ๊ธฐ์๋ ๋ค์ ๊ธด ๊ฒ ๊ฐ์ต๋๋ค( ProTypes.node
๊ฐ ๋ฎ์ด์ผ๊ฒ ์ฃ ?).
๋ฌธ์์์
// Anything that can be rendered: numbers, strings, elements or an array
// (or fragment) containing these types.
optionalNode: React.PropTypes.node,
func
๋ฅผ ์ถ๊ฐํด์ผ ํ ๊น์? ์๋๋ฉด node
๊ฐ func
๋ ์ฒ๋ฆฌํ์ง ์๋ ์ด์ ๊ฐ ์์ต๋๊น?
์๋ก์ด propType ์ ํจ์ฑ ๊ฒ์ฌ๊ธฐ๋ฅผ ์ถ๊ฐํ๋ ๊ฒ์ ์ด๋ป์ต๋๊น? ๊ฐ์ ๊ฒ
propTypes: {
optionalComponent: React.PropTypes.component
}
๊ตฌ์ฑ ์์๋ ๋ค์๊ณผ ๊ฐ์ ํํ๋ฅผ ๊ฐ์ง ๊ฒ์ ๋๋ค.
PropTypes.oneOfType([ PropTypes.node, PropTypes.func ])
๋๋ ๋น์ทํ ๊ฒ. ๋ด ์๊ฐ์ ์ฌ๋๋ค์ด ํจ์๋ฅผ ์ ๋ฌํ๋๋ก ํ๋ ๊ฒ์ ๋งค์ฐ ์ํํ์ง๋ง ๋ ๋์ ์ ํจ์ฑ ๊ฒ์ฌ๋ฅผ ๋ง๋๋ ๋ฐฉ๋ฒ์ ์ ๋ชจ๋ฅด๊ฒ ์ต๋๋ค. function.toString
์ฝ๋ ๊ฒ์ ์ถ์ ํ์ ์๋ํ์ง ์๋ ๊ฑฐ๋ํ ํดํน์ฒ๋ผ ๋ณด์ด์ง๋ง ์ด๊ฒ์ด ๋ด๊ฐ ์๊ณ ์๋ ์ ์ผํ ์ต์
์
๋๋ค.
์ด๊ฒ์ ์ด๋ป๊ฒ ์ฌ์ฉํ๋์ง ๋ณด์ฌ์ค ์ ์์ต๋๊น? ๊ตฌ์ฑ ์์ ํด๋์ค๊ฐ node
์๋ ์ ํจํด์ผ ํ๋ค๊ณ ์๊ฐํ์ง ์์ต๋๋ค. node
๋ ๋ ๋๋งํ ์ ์๋ ๋ชจ๋ ๊ฒ์ ์๋ฝํด์ผ ํฉ๋๋ค. ํด๋์ค๋ ์ง์ ๋ ๋๋งํ ์ ์์ต๋๋ค. ์ ํ์ด ์ค์ ๋ ์์๋ฅผ ์ ๋ฌํด์ผ ํฉ๋๋ค.
์ธ์์. ๋น์ ์ด ์ ๋ง ๋ง์ต๋๋ค. ๋ด ์์ ์ด ๋ฉ์ฒญํ๊ฒ ๋๊ปด์ง๋ค. ๋ญ๊ฐ ์๋ชป๋ ๋ฐฉ์์ผ๋ก ํ์ธํ๊ณ ์์๋ ๊ฒ ๊ฐ์์. ์์ ์ฃ์กํฉ๋๋ค.
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
์ด๊ฒ์ ์ด๋ป๊ฒ ์ฌ์ฉํ๋์ง ๋ณด์ฌ์ค ์ ์์ต๋๊น? ๊ตฌ์ฑ ์์ ํด๋์ค๊ฐ
node
์๋ ์ ํจํด์ผ ํ๋ค๊ณ ์๊ฐํ์ง ์์ต๋๋ค.node
๋ ๋ ๋๋งํ ์ ์๋ ๋ชจ๋ ๊ฒ์ ์๋ฝํด์ผ ํฉ๋๋ค. ํด๋์ค๋ ์ง์ ๋ ๋๋งํ ์ ์์ต๋๋ค. ์ ํ์ด ์ค์ ๋ ์์๋ฅผ ์ ๋ฌํด์ผ ํฉ๋๋ค.