React๋ก ๊ฐ๋ฐํ๋ฉด์ ๊ฐ์ฅ ๋ง์ด ์ฐ๊ฒ ๋ ํจ์ ์ค ํ๋๋
map()
์ ๋๋ค. ์ค์ ๋ก Westagram project๋ฅผ ํ๋ฉด์๋ ์ ์ผ ๋ง์ด ์ผ์๋๊ฑฐ ๊ฐ์ต๋๋ค. ์ด์ ๋ ์น์์ ์ด๋ค component๋ฅผ ๋ฐ๋ณตํด์ ํ์ด์ง์ distributeํ๊ธฐ์ ํธํ๊ธฐ ๋๋ฌธ์ ๋๋ค. ํ์ง๋ง ์๊ฐ๋ณด๋ค ์ฌ์ฉ๋ฐฉ๋ฒ์ด ์ด๋ ต๊ธฐ ๋๋ฌธ์ (๊ฐ์ธ์ ์ผ๋ก...) Westagram project๊ฐ ๋๋๊ณ ๋ณต์ตํด์ผ๊ฒ ๋ค๊ณ ์๊ฐํ์์ต๋๋ค
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๋ก ๋์ด์์ด ํ๊ฐ๋ ธ์๋ค...)
map()
ํจ์๋ react์ ๊ฐ์ด ์ฌ์ฉํ๊ฒ ๋๋ฉด ํญํ์ ์ธ ์๋์ง๋ฅผ ๋ฐ์ํฉ๋๋ค. ๋ฐฐ์ด ๊ฐ์ฒด์ ๋ด์ฅ๋map()
ํจ์๋ฅผ ํตํ์ฌ ๋ฐ๋ณต๋๋ ์ปดํฌ๋ํธ๋ค์ ๋ ๋๋ง ํ ์ ์๊ธฐ ๋๋ฌธ์ ๋๋ค.
Monster ๊ณผ์ ๋ฅผ ๋ณด๋ฉฐ
map()
ํจ์๋ฅผ ๋ฆฌ๋ทฐ ํด๋ณด์!
์ผ๋จ json data ๋ฅผ fetch()
ํธ์ถ ํด์ค๋๋ค. ์ ์ด๋ฏธ์ง์์ ๋ณด๋ค์ํผ ๊ฐ์ฒด ํ์์ผ๋ก ํค๊ฐ๊ณผ ๋ฐ์ดํฐ๊ฐ ๋์ด๋์ด ์๋ data ์
๋๋ค. ์ด์ ์ด ๋ฐฐ์ด์ ์์ ์ปดํฌ๋ํธ์ props๋ฅผ ์จ์ ๋๊ฒจ ์ฃผ๊ฒ ์ต๋๋ค.
๋๊ฒจ ๋ฐ์ ๋ฐฐ์ด์ ํค๊ฐ์ ์ด์ฉํด map()
ํจ์๋ฅผ ์ด์ฉํด <Card />
์ปดํฌ๋ํธ๋ฅผ ๋ฆฌํด ํด์ค๊ฒ๋๋ค. (id
, name
, ๊ทธ๋ฆฌ๊ณ email
props๋ง ๋๊ฒจ ์ค๋๋ค.)
์นด๋ ์ปดํฌ๋ํธ์์ ๋ฐ์ดํฐ๋ฅผ ๋ ๋ ํด์ค ๊ตฌ์กฐ๋ฅผ ์ก์์ค๋๋ค.
${id}
, {name}
๊ทธ๋ฆฌ๊ณ {email}
๋ json data์์ ๋ฐ์ ์ด๋ฏธ์ง๋ฅผ ๋ ๋ ํด์ค๊ฒ๋๋ค.
์ ์ด๋ฏธ์ง ์ฒ๋ผ ์ฌ๋ฌ์ฅ์ ์นด๋๋ค์ด ๋ ๋๊ฐ ๋ ๊ฒ๋๋ค. map()
ํจ์๋ฅผ ์ฐ์ง ์์๋ค๋ฉด ์นด๋๋ฅผ ํ๋์ฉ jsx์ scss๋ฅผ ์ฌ์ฉํด ๋ง๋ค์ด์ผ ํ๊ณ ์ฝ๋๋ ์์ฒญ ๊ธธ์ด ์ง๊ฒ์
๋๋ค. ํ์ง๋ง map()
ํจ์๋ฅผ ์ด์ฉํด ๋๊ฐ์ ๊ตฌ์กฐ์ ์ฌ๋ฌ ์ด๋ฏธ์ง๋ฅผ ํ๋ฒ์ ๋ ๋๋ง ํ ์ ์์ต๋๋ค.
์ ๋ mapํจ์๊ฐ ์ด๋ ต๋๋ผ๊ตฌ์,, ๋๋ จ๋ ์ ๋ฆฌ ์๋ณด๊ณ ๊ฐ๋๋น๐ก๐ก