React: React.PropTypes.node๋Š” ์ƒํƒœ ๋น„์ €์žฅ ๊ตฌ์„ฑ ์š”์†Œ(ํ•จ์ˆ˜)๋ฅผ ํ—ˆ์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2015๋…„ 11์›” 22์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: facebook/react

๋ฐฉ๊ธˆ 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 ๋„ ์ฒ˜๋ฆฌํ•˜์ง€ ์•Š๋Š” ์ด์œ ๊ฐ€ ์žˆ์Šต๋‹ˆ๊นŒ?

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

์ด๊ฒƒ์„ ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉํ–ˆ๋Š”์ง€ ๋ณด์—ฌ์ค„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? ๊ตฌ์„ฑ ์š”์†Œ ํด๋ž˜์Šค๊ฐ€ node ์—๋„ ์œ ํšจํ•ด์•ผ ํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. node ๋Š” ๋ Œ๋”๋งํ•  ์ˆ˜ ์žˆ๋Š” ๋ชจ๋“  ๊ฒƒ์„ ์ˆ˜๋ฝํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ํด๋ž˜์Šค๋Š” ์ง์ ‘ ๋ Œ๋”๋งํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ์œ ํ˜•์ด ์„ค์ •๋œ ์š”์†Œ๋ฅผ ์ „๋‹ฌํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

๋ชจ๋“  3 ๋Œ“๊ธ€

์ƒˆ๋กœ์šด propType ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ๊ธฐ๋ฅผ ์ถ”๊ฐ€ํ•˜๋Š” ๊ฒƒ์€ ์–ด๋–ป์Šต๋‹ˆ๊นŒ? ๊ฐ™์€ ๊ฒƒ

propTypes: {
    optionalComponent: React.PropTypes.component
}

๊ตฌ์„ฑ ์š”์†Œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ํ˜•ํƒœ๋ฅผ ๊ฐ€์งˆ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

PropTypes.oneOfType([ PropTypes.node, PropTypes.func ])

๋˜๋Š” ๋น„์Šทํ•œ ๊ฒƒ. ๋‚ด ์ƒ๊ฐ์— ์‚ฌ๋žŒ๋“ค์ด ํ•จ์ˆ˜๋ฅผ ์ „๋‹ฌํ•˜๋„๋ก ํ•˜๋Š” ๊ฒƒ์€ ๋งค์šฐ ์œ„ํ—˜ํ•˜์ง€๋งŒ ๋” ๋‚˜์€ ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ๋ฅผ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ•์„ ์ž˜ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค. function.toString ์ฝ๋Š” ๊ฒƒ์€ ์ถ•์†Œ ํ›„์— ์ž‘๋™ํ•˜์ง€ ์•Š๋Š” ๊ฑฐ๋Œ€ํ•œ ํ•ดํ‚น์ฒ˜๋Ÿผ ๋ณด์ด์ง€๋งŒ ์ด๊ฒƒ์ด ๋‚ด๊ฐ€ ์•Œ๊ณ  ์žˆ๋Š” ์œ ์ผํ•œ ์˜ต์…˜์ž…๋‹ˆ๋‹ค.

์ด๊ฒƒ์„ ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉํ–ˆ๋Š”์ง€ ๋ณด์—ฌ์ค„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? ๊ตฌ์„ฑ ์š”์†Œ ํด๋ž˜์Šค๊ฐ€ node ์—๋„ ์œ ํšจํ•ด์•ผ ํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. node ๋Š” ๋ Œ๋”๋งํ•  ์ˆ˜ ์žˆ๋Š” ๋ชจ๋“  ๊ฒƒ์„ ์ˆ˜๋ฝํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ํด๋ž˜์Šค๋Š” ์ง์ ‘ ๋ Œ๋”๋งํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ์œ ํ˜•์ด ์„ค์ •๋œ ์š”์†Œ๋ฅผ ์ „๋‹ฌํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์„ธ์ƒ์—. ๋‹น์‹ ์ด ์ •๋ง ๋งž์Šต๋‹ˆ๋‹ค. ๋‚ด ์ž์‹ ์ด ๋ฉ์ฒญํ•˜๊ฒŒ ๋Š๊ปด์ง„๋‹ค. ๋ญ”๊ฐ€ ์ž˜๋ชป๋œ ๋ฐฉ์‹์œผ๋กœ ํ™•์ธํ•˜๊ณ  ์žˆ์—ˆ๋˜ ๊ฒƒ ๊ฐ™์•„์š”. ์†Œ์Œ ์ฃ„์†กํ•ฉ๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰