๐Ÿ‘ฉ‍๐Ÿ’ป๊ฐœ๋ฐœ_TIL/TIL

[TIL]๊ฐ์ฒด์˜ ํ”„๋กœํผํ‹ฐ ๋ช…์— ๋”ฐ์˜ดํ‘œ?

Daisy.lee 2021. 12. 9. 23:54

๐Ÿค”๊ถ๊ธˆํ–ˆ๋˜ ๊ฒƒ๋“ค

1. ๊ฐ์ฒด์˜ ํ”„๋กœํผํ‹ฐ ๋ช…์— ๋”ฐ์˜ดํ‘œ๋ฅผ ์–ธ์ œ๋Š” ๋ถ™์ด๊ณ , ์–ธ์ œ๋Š” ์•ˆ ๋ถ™์ด๋Š”์ง€?

  • ์‚ฌ์šฉํ•˜์ง€ ์•Š์•„๋„ ๋˜์ง€๋งŒ, property๋ช…(key) ์— ๋„์–ด์“ฐ๊ธฐ๊ฐ€ ์žˆ๋Š” ๊ฒฝ์šฐ์—๋Š” ๋”ฐ์˜ดํ‘œ๋ฅผ ๋ถ™์—ฌ์•ผ ํ•œ๋‹ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

(์ถœ์ฒ˜: ์ œ๋กœ์ดˆ๋‹˜ ๋ธ”๋กœ๊ทธ)

 

(JavaScript) ๊ฐ์ฒด(Object)์™€ ๋ฐฐ์—ด(Array)

์•ˆ๋…•ํ•˜์„ธ์š”, ์ด๋ฒˆ ์‹œ๊ฐ„์—๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐ์ฒด(Object)์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ๊ฐ์ฒด(Object) ๊ฐ์ฒด๋ž€, ํ˜„์‹ค์˜ ์‚ฌ๋ฌผ์„ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์— ๋ฐ˜์˜ํ•œ ๊ฒ๋‹ˆ๋‹ค. ์ฝ”๋“œ๋กœ ๋ณด๋Š”๊ฒŒ ์ดํ•ดํ•˜๊ธฐ ์‰ฝ๊ฒ ์ฃ ? ์ €๋ฅผ ํ”„๋กœ๊ทธ๋ž˜๋ฐ

www.zerocho.com

๐Ÿ˜Ž์•Œ๊ฒŒ๋œ ๊ฒƒ๋“ค

1. Array.map()ํ•จ์ˆ˜๋Š” ์„ธ ๊ฐ€์ง€์˜ arguments๋ฅผ ๋ฐ›์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ์ฒซ ๋ฒˆ์งธ argument: ์ฒ˜๋ฆฌํ•  ํ˜„์žฌ element
  • ๋‘ ๋ฒˆ์งธ argument: ์ฒ˜๋ฆฌํ•  ํ˜„์ œ element์˜ index
  • ์„ธ ๋ฒˆ์žฌ argument: map() ์„ ํ˜ธ์ถœํ•œ ๋ฐฐ์—ด

2. ๋ฐ˜๋ณต๋ฌธ์œผ๋กœ ๋ Œ๋”๋งํ•˜๋Š” HTML ์š”์†Œ๋“ค์€ key={ }๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

(์ฐธ๊ณ ํ•  ๋งŒํ•œ ์ž๋ฃŒ: ๋ฆฌ์•กํŠธ ๊ณต์‹ ๋ฌธ์„œ)

 

๋ฆฌ์ŠคํŠธ์™€ Key – React

A JavaScript library for building user interfaces

ko.reactjs.org

2. Array.push()๋Š” ์—ฌ๋Ÿฌ ๊ฐœ์˜ ์š”์†Œ๋ฅผ ์ถ”๊ฐ€ํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ๋ฐฐ์—ด์—์„œ ์ž์ฃผ ์“ฐ์ด๋Š” ๋ฉ”์„œ๋“œ๋ฅผ ์ •๋ฆฌํ•ด๋ณผ ํ•„์š”๊ฐ€ ์žˆ๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.