[TIL] 20.09.26

HyeRyunยท2020๋…„ 9์›” 26์ผ
0

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
6/48

๐Ÿง ๋‹˜ ์˜ค๋Š˜ ๋ญํ–ˆ์Œ?

์›น ๊ฒŒ์ž„์„ ๋งŒ๋“ค๋ฉฐ ๋ฐฐ์šฐ๋Š” React ๊ฐ•์˜ ๋“ฃ๊ธฐ

3-2. ๋ฆฌ์•กํŠธ ๋ฐ˜๋ณต๋ฌธ(map)
3-3. ๋ฆฌ์•กํŠธ ๋ฐ˜๋ณต๋ฌธ(key)
3-4. ์ปดํฌ๋„ŒํŠธ ๋ถ„๋ฆฌ์™€ props

๐ŸŒฑ ์•Œ๊ฒŒ ๋œ ์‚ฌ์‹ค

  • JS์—์„œ ๋ฐ˜๋ณต๋ฌธ์„ ๋Œ๋ฆด ๋•Œ map()์„ ์‚ฌ์šฉํ•œ๋‹ค.
  • ๋ฐ˜๋ณต๋ฌธ์˜ key ๊ฐ’์— ์ธ๋ฑ์Šค๋งŒ ์“ฐ๋ฉด ์•ˆ ๋œ๋‹ค.
  • props๋Š” ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ์—์„œ ์ƒ์†ํ•ด์ค€ ์†์„ฑ์„ ์˜๋ฏธ!
    ์˜ˆ๋ฅผ ๋“ค์–ด, ๋ฐฐ์—ด์˜ ์†์„ฑ์„ ์ž์‹ ์ปดํฌ๋„ŒํŠธํ•œํ…Œ ๋„˜๊ฒจ์ค„ ๋•Œ๋Š” ์ด๋ ‡๊ฒŒ ํ•œ๋‹ค.
    1) ๋ฐฐ์—ด์„ ์„ ์–ธํ•œ๋‹ค.

    2) return์— ์ž์‹ ์ปดํฌ๋„ŒํŠธ(์—ฌ๊ธฐ์„œ๋Š” Try) ์จ์ฃผ๊ณ  ์˜†์— value={v} index={i} ์ด๋ ‡๊ฒŒ ์จ์ค€๊ฒŒ ํ”„๋กญ์Šค!!

    3) ์ž์‹ ์ปดํฌ๋„ŒํŠธ์—์„œ ํ”„๋กญ์Šค๋ฅผ ๊ฐ€์ ธ๋‹ค ์“ฐ๋ฉด ๋œ๋‹ค.
    ๋งŒ์•ฝ ์ธ๋ฑ์Šค๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์œผ๋ฉด {this.props.index} ์ด๋ ‡๊ฒŒ ์จ์ฃผ๋ฉด ๋œ๋‹ค ^^!

โœจ ๋Š๋‚€์ ์€?

๋ฆฌ์•กํŠธ๋ฅผ ๊ธฐ์ดˆ๋ถ€ํ„ฐ ์ฒœ์ฒœํžˆ ์•Œ๋ ค์ฃผ์‹œ๊ณ  ๋”ฐ๋ผํ•˜๋ฉด์„œ ์‹ค์Šตํ•ด๋ณด๋‹ˆ๊นŒ ์ง„์‹ฌ ์žฌ๋ฐŒ๋‹ค.. ๊ทธ๋ฆฌ๊ณ  ๊ฐ•์˜ ๋‚ด์šฉ์—์„œ ๋ฐฐ์šด๊ฑธ ์กฐ๊ธˆ ๋ฐ”๊ฟ”์„œ ์ง์ ‘ ๊ฐœ๋ฐœํ•ด๋ณด๋‹ˆ๊น ์ง„์งœ ๊ฐœ๊ฟ€์žผใ…‹ใ…‹ ๊ฐœ๋ฐœ ๊ณต๋ถ€๊ฐ€ ์ด๋ ‡๊ฒŒ ์žฌ๋ฐŒ๋‹ค๊ณ  ๋Š๊ปด์ง„๊ฑด ์˜ค๋žœ๋งŒ์ด๋‹ค. ์•Œ๋ฐ” ๊ณ„์‚ฐ๊ธฐ ํ”„๋กœ์ ํŠธ์— ํ”„๋กญ์Šค๋ฅผ ์จ๋ณด๊ณ  ์‹ถ์€๋ฐ ์–ด๋–ค ๋ถ€๋ถ„์— ๋„ฃ์–ด์•ผ ํ• ์ง€ ๊ณ ๋ฏผ์ด๋‹ค.

๐Ÿ‘€ ์ฐธ๊ณ ํ•˜๊ธฐ

profile
๊ฐœ๋ฐœ๊ฐœ๋ฐœ

0๊ฐœ์˜ ๋Œ“๊ธ€