TIL 22 - Array.map()

chachachaยท2021๋…„ 5์›” 8์ผ
0

React

๋ชฉ๋ก ๋ณด๊ธฐ
7/8

1.1 Let's learn about Array.map() ๐Ÿ˜Ž

React๋กœ ๊ฐœ๋ฐœํ•˜๋ฉด์„œ ๊ฐ€์žฅ ๋งŽ์ด ์“ฐ๊ฒŒ ๋  ํ•จ์ˆ˜ ์ค‘ ํ•˜๋‚˜๋Š” map() ์ž…๋‹ˆ๋‹ค. ์‹ค์ œ๋กœ Westagram project๋ฅผ ํ•˜๋ฉด์„œ๋„ ์ œ์ผ ๋งŽ์ด ์ผ์—ˆ๋˜๊ฑฐ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์ด์œ ๋Š” ์›น์—์„œ ์–ด๋–ค component๋ฅผ ๋ฐ˜๋ณตํ•ด์„œ ํŽ˜์ด์ง€์— distributeํ•˜๊ธฐ์— ํŽธํ•˜๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ƒ๊ฐ๋ณด๋‹ค ์‚ฌ์šฉ๋ฐฉ๋ฒ•์ด ์–ด๋ ต๊ธฐ ๋•Œ๋ฌธ์— (๊ฐœ์ธ์ ์œผ๋กœ...) Westagram project๊ฐ€ ๋๋‚˜๊ณ  ๋ณต์Šตํ•ด์•ผ๊ฒ ๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ์—ˆ์Šต๋‹ˆ๋‹ค

1.2 ๐Ÿฉ What is map() function?

map() ํ•จ์ˆ˜๋Š” ๋ฐฐ์—ด ๋‚ด์˜ ๋ชจ๋“  ์š”์†Œ ๊ฐ๊ฐ์— ๋Œ€ํ•˜์—ฌ ์ฃผ์–ด์ง„ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•œ ๊ฒฐ๊ณผ๋ฅผ ๋ชจ์•„ ์ƒˆ๋กœ์šด ๋ฐฐ์—ด์„ ๋ฐ˜ํ™˜ํ•ด์ค๋‹ˆ๋‹ค.

๋ฐฐ์—ด์„ ์ˆœํšŒํ•˜๋ฉด์„œ ๊ฐ element์˜ ๊ฐ’์„ ๋ณ€๊ฒฝํ•˜์—ฌ ์ƒˆ๋กœ์šด ๋ฐฐ์—ด์„ ๋งŒ๋“ค์–ด ์ค๋‹ˆ๋‹ค.

๊ธฐ๋ณธ ๋ฌธ๋ฒ•

const arry = [5, 8, 9, 13];
const map = ary.map(monster => monster * 2);
console.log(map) // expected output: [10, 16, 18, 26]

์œ„ ์˜ˆ์ œ์—์„œ ๊ทน๋‹จ์ ์œผ๋กœ ๋ณด์—ฌ์ค„๋ ค๊ณ  ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ monster๋ผ๊ณ  ์ •ํ–ˆ๋Š”๋ฐ map()๋„ ํ•จ์ˆ˜์ด๊ธฐ ๋•Œ๋ฌธ์— ๋งค๊ฐœ๋ณ€์ˆ˜๋Š” ์–ด๋–ค์‹์œผ๋กœ ์ •์˜ํ•ด๋„ ์ƒ๊ด€์—†๋‹ค. (mozilla ์˜ˆ์ œ๋ฅผ ๋ณด๋ฉด ํ•ญ์ƒ x๋กœ ๋˜์–ด์žˆ์–ด ํ–‡๊ฐˆ๋ ธ์—ˆ๋‹ค...)

2.1 Combining map() function with React ๐Ÿ˜

map() ํ•จ์ˆ˜๋Š” react์™€ ๊ฐ™์ด ์‚ฌ์šฉํ•˜๊ฒŒ ๋˜๋ฉด ํญํŒ”์ ์ธ ์‹œ๋„ˆ์ง€๋ฅผ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. ๋ฐฐ์—ด ๊ฐ์ฒด์— ๋‚ด์žฅ๋œ map() ํ•จ์ˆ˜๋ฅผ ํ†ตํ•˜์—ฌ ๋ฐ˜๋ณต๋˜๋Š” ์ปดํฌ๋„ŒํŠธ๋“ค์„ ๋ Œ๋”๋ง ํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.

2.2 Map() function in the wild โœŒ๐Ÿป

Monster ๊ณผ์ œ๋ฅผ ๋ณด๋ฉฐ map() ํ•จ์ˆ˜๋ฅผ ๋ฆฌ๋ทฐ ํ•ด๋ณด์ž!

์ผ๋‹จ json data ๋ฅผ fetch() ํ˜ธ์ถœ ํ•ด์ค๋‹ˆ๋‹ค. ์œ„ ์ด๋ฏธ์ง€์—์„œ ๋ณด๋‹ค์‹œํ”ผ ๊ฐ์ฒด ํ˜•์‹์œผ๋กœ ํ‚ค๊ฐ’๊ณผ ๋ฐ์ดํ„ฐ๊ฐ€ ๋‚˜์—ด๋˜์–ด ์žˆ๋Š” data ์ž…๋‹ˆ๋‹ค. ์ด์ œ ์ด ๋ฐฐ์—ด์„ ์ž์‹ ์ปดํฌ๋„ŒํŠธ์— props๋ฅผ ์จ์„œ ๋„˜๊ฒจ ์ฃผ๊ฒ ์Šต๋‹ˆ๋‹ค.

๋„˜๊ฒจ ๋ฐ›์€ ๋ฐฐ์—ด์˜ ํ‚ค๊ฐ’์„ ์ด์šฉํ•ด map() ํ•จ์ˆ˜๋ฅผ ์ด์šฉํ•ด <Card /> ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ฆฌํ„ด ํ•ด์ค„๊ฒ๋‹ˆ๋‹ค. (id, name, ๊ทธ๋ฆฌ๊ณ  email props๋งŒ ๋„˜๊ฒจ ์ค๋‹ˆ๋‹ค.)

์นด๋“œ ์ปดํฌ๋„ŒํŠธ์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๋ Œ๋” ํ•ด์ค„ ๊ตฌ์กฐ๋ฅผ ์žก์•„์ค๋‹ˆ๋‹ค.

${id}, {name} ๊ทธ๋ฆฌ๊ณ  {email} ๋Š” json data์—์„œ ๋ฐ›์•„ ์ด๋ฏธ์ง€๋ฅผ ๋ Œ๋” ํ•ด์ค„๊ฒ๋‹ˆ๋‹ค.

์œ„ ์ด๋ฏธ์ง€ ์ฒ˜๋Ÿผ ์—ฌ๋Ÿฌ์žฅ์˜ ์นด๋“œ๋“ค์ด ๋ Œ๋”๊ฐ€ ๋ ๊ฒ๋‹ˆ๋‹ค. map() ํ•จ์ˆ˜๋ฅผ ์“ฐ์ง€ ์•Š์•˜๋‹ค๋ฉด ์นด๋“œ๋ฅผ ํ•˜๋‚˜์”ฉ jsx์™€ scss๋ฅผ ์‚ฌ์šฉํ•ด ๋งŒ๋“ค์–ด์•ผ ํ•˜๊ณ  ์ฝ”๋“œ๋„ ์—„์ฒญ ๊ธธ์–ด ์งˆ๊ฒƒ์ž…๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ map()ํ•จ์ˆ˜๋ฅผ ์ด์šฉํ•ด ๋˜‘๊ฐ™์€ ๊ตฌ์กฐ์˜ ์—ฌ๋Ÿฌ ์ด๋ฏธ์ง€๋ฅผ ํ•œ๋ฒˆ์— ๋ Œ๋”๋ง ํ• ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

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

comment-user-thumbnail
2021๋…„ 5์›” 8์ผ

์ €๋„ mapํ•จ์ˆ˜๊ฐ€ ์–ด๋ ต๋”๋ผ๊ตฌ์š”,, ๋„๋ จ๋‹˜ ์ •๋ฆฌ ์ž˜๋ณด๊ณ ๊ฐ‘๋‹ˆ๋‹น๐Ÿ’ก๐Ÿ’ก

๋‹ต๊ธ€ ๋‹ฌ๊ธฐ