We want to hear from you!Take our 2021 Community Survey!
Support Ukraine ๐Ÿ‡บ๐Ÿ‡ฆ Help Provide Humanitarian Aid to Ukraine.

Unknown Prop Warning

์˜ฌ๋ฐ”๋ฅธ DOM ์–ดํŠธ๋ฆฌ๋ทฐํŠธ/ํ”„๋กœํผํ‹ฐ๋กœ ์ธ์‹๋˜์ง€ ์•Š๋Š” DOM ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ๋ Œ๋”๋งํ•˜๋ ค๊ณ  ํ•˜๋ฉด unknown-prop ๊ฒฝ๊ณ ๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. DOM ์—˜๋ฆฌ๋จผํŠธ์— ์ž˜๋ชป๋œ props๊ฐ€ ์ถ”๊ฐ€๋˜์ง€ ์•Š๋„๋ก ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์ด ๊ฒฝ๊ณ ๊ฐ€ ํ‘œ์‹œ๋˜๋Š” ๋ช‡ ๊ฐ€์ง€ ์ด์œ ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

  1. {...this.props} ๋˜๋Š” cloneElement(element, this.props)๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๊นŒ? ๊ทธ๋ ‡๋‹ค๋ฉด ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ž๊ธฐ ์ž์‹ ์˜ props๋ฅผ ์ž์‹ ์—˜๋ฆฌ๋จผํŠธ๋กœ ์ง์ ‘ ์ „๋‹ฌํ•˜๋Š” ๊ฒฝ์šฐ์ž…๋‹ˆ๋‹ค. (์˜ˆ์‹œ. props ์ „๋‹ฌ) ์ž์‹ ์ปดํฌ๋„ŒํŠธ๋กœ props๋ฅผ ์ „๋‹ฌํ•  ๋•Œ ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ์—์„œ ์‚ฌ์šฉ๋˜๋Š” props๋ฅผ ์‹ค์ˆ˜๋กœ ์ „๋‹ฌํ•˜์ง€ ์•Š๋„๋ก ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
  2. ์‚ฌ์šฉ์ž ์ •์˜ ๋ฐ์ดํ„ฐ๋ฅผ ๋‚˜ํƒ€๋‚ด๊ธฐ ์œ„ํ•ด ๋„ค์ดํ‹ฐ๋ธŒ DOM ๋…ธ๋“œ์—์„œ ๋น„ํ‘œ์ค€ DOM ์–ดํŠธ๋ฆฌ๋ทฐํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋Š” ๊ฒฝ์šฐ์ž…๋‹ˆ๋‹ค. ํ‘œ์ค€ DOM ์—˜๋ฆฌ๋จผํŠธ์— ์‚ฌ์šฉ์ž ์ •์˜ ๋ฐ์ดํ„ฐ๋ฅผ ์ถ”๊ฐ€ํ•˜๋ ค๋Š” ๊ฒฝ์šฐ MDN์— ์„ค๋ช…๋œ ์‚ฌ์šฉ์ž ์ •์˜ data ์–ดํŠธ๋ฆฌ๋ทฐํŠธ๋ฅผ ์‚ฌ์šฉํ•ด๋ณด์„ธ์š”.
  3. React๊ฐ€ ์•„์ง ์ง€์ •๋œ ์–ดํŠธ๋ฆฌ๋ทฐํŠธ๋ฅผ ์ธ์‹ํ•˜์ง€ ๋ชปํ•˜๋Š” ๊ฒฝ์šฐ์ž…๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ๋‹ค์Œ React ๋ฒ„์ „์—์„œ ์ˆ˜์ •๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ React๋Š” ํ˜„์žฌ ์•Œ ์ˆ˜ ์—†๋Š” ๋ชจ๋“  ์–ดํŠธ๋ฆฌ๋ทฐํŠธ๋ฅผ ์ œ๊ฑฐํ•˜๋ฏ€๋กœ React ์•ฑ์—์„œ ๋ Œ๋”๋ง๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
  4. React ์ปดํฌ๋„ŒํŠธ ์ด๋ฆ„์— ๋Œ€๋ฌธ์ž๊ฐ€ ํฌํ•จ๋˜์–ด ์žˆ์ง€ ์•Š์€ ๊ฒฝ์šฐ์ž…๋‹ˆ๋‹ค. React JSX์—์„œ๋Š” ๋Œ€์†Œ๋ฌธ์ž ๊ทœ์น™์„ ์‚ฌ์šฉํ•˜์—ฌ ์‚ฌ์šฉ์ž ์ •์˜ ์ปดํฌ๋„ŒํŠธ์™€ DOM ํƒœ๊ทธ๋ฅผ ๊ตฌ๋ณ„ํ•˜๊ธฐ ๋•Œ๋ฌธ์— React ์ปดํฌ๋„ŒํŠธ์— ๋Œ€๋ฌธ์ž๊ฐ€ ์—†๋‹ค๋ฉด ์ด๊ฒƒ์„ DOM ํƒœ๊ทธ๋กœ ํ•ด์„ํ•ฉ๋‹ˆ๋‹ค.

์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๋ ค๋ฉด, ํ•ฉ์„ฑ ์ปดํฌ๋„ŒํŠธ๋Š” ์ž์‹ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์œ„ํ•ด ๋งŒ๋“ค์–ด์ง„ ๊ฒƒ์ด ์•„๋‹Œ ํ•ฉ์„ฑ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์œ„ํ•ด ๋งŒ๋“ค์–ด์ง„ ๋ชจ๋“  props๋ฅผ โ€œ์†Œ๋น„ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹คโ€. ์˜ˆ๋ฅผ ๋“ค์–ด,

๊ธˆ์ง€ ์˜ˆ๊ธฐ์น˜ ์•Š์€ layout prop์ด div ํƒœ๊ทธ์— ์ „๋‹ฌ๋ฉ๋‹ˆ๋‹ค.

function MyDiv(props) {
  if (props.layout === 'horizontal') {
    // ๊ธˆ์ง€! "layout"์€ <div> ๊ฐ€ ์ดํ•ดํ•˜๋Š” prop์ด ์•„๋‹ˆ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.
    return <div {...props} style={getHorizontalStyle()} />
  } else {
    // ๊ธˆ์ง€! "layout"์€ <div> ๊ฐ€ ์ดํ•ดํ•˜๋Š” prop์ด ์•„๋‹ˆ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.
    return <div {...props} style={getVerticalStyle()} />
  }
}

๊ถŒ์žฅ ์ „๊ฐœ ์—ฐ์‚ฐ์ž(spread operator)๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ณ€์ˆ˜๋ฅผ props์—์„œ ๋นผ๋‚ด๊ณ  ๋‚˜๋จธ์ง€ props๋ฅผ ๋ณ€์ˆ˜์— ๋„ฃ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

function MyDiv(props) {
  const { layout, ...rest } = props
  if (layout === 'horizontal') {
    return <div {...rest} style={getHorizontalStyle()} />
  } else {
    return <div {...rest} style={getVerticalStyle()} />
  }
}

๊ถŒ์žฅ ์ƒˆ ๊ฐ์ฒด์— props๋ฅผ ๋ณต์‚ฌํ•˜๊ณ  ์ƒˆ ๊ฐ์ฒด์—์„œ ์‚ฌ์šฉ ์ค‘์ธ key๋ฅผ ์‚ญ์ œํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ์›๋ž˜ this.props ๊ฐ์ฒด์—์„œ ๊ทธ ๊ฐ์ฒด๋ฅผ ์‚ญ์ œํ•˜๋ฉด ์•ˆ๋ฉ๋‹ˆ๋‹ค. ์™œ๋ƒํ•˜๋ฉด ๊ทธ ๊ฐ์ฒด๋Š” ๋ถˆ๋ณ€์ด์–ด์•ผ ํ•˜๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.

function MyDiv(props) {

  const divProps = Object.assign({}, props);
  delete divProps.layout;

  if (props.layout === 'horizontal') {
    return <div {...divProps} style={getHorizontalStyle()} />
  } else {
    return <div {...divProps} style={getVerticalStyle()} />
  }
}
Is this page useful?Edit this page