-
[React.js] map ํจ์๋ฅผ ์ฌ์ฉํ ๋ ์ค๊ดํธ({})์ ์๊ดํธ(())
map ํจ์๋ฅผ ์ฌ์ฉํ ๋ ์ค๊ดํธ({})์ ์๊ดํธ(())๋ค์ด๊ฐ๋ฉฐ๋ฆฌ์กํธ(React)์์ ์ค๊ดํธ @{}@์ ์๊ดํธ @()@๋ ์ฃผ๋ก JSX ์์์ ์ฌ์ฉ๋๋ฉฐ, ํนํ @map()@ ๋ฉ์๋์ ํจ๊ป ์ฌ์ฉ๋ ๋ ์ฃผ์ํด์ผ ํ ์ ์ด ๋ช๊ฐ์ง ์๋ค.@map@ ํจ์๋ฅผ ์ฌ์ฉํ ๋ ์ค๊ดํธ(@{}@)์ ์๊ดํธ(@()@)๋ฅผ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ์ ์ฐจ์ด์ ๋ํด ์์๋ณด์. ์ค๊ดํธ(@{}@)์๋ฐ์คํฌ๋ฆฝํธ ํํ์(Expression)์ ๊ฐ์ธ๊ธฐ ์ํด ์ฌ์ฉ๋๋ค.์ค๊ดํธ๋ฅผ ์ฌ์ฉํ ๋๋ ๋ฐ๋์ ๋ฐํ๊ฐ์ด ์์ด์ผ ํ๋ฉฐ, ๋ช
์์ ์ผ๋ก @return@ ํค์๋๋ฅผ ์ฌ์ฉํด์ ๊ฐ์ ๋ฐํํด์ผ ํ๋ค.์ฌ๋ฌ ์ค์ ์ฝ๋๊ฐ ํ์ํ๊ฑฐ๋ ์กฐ๊ฑด๋ฌธ ๋ฑ ๋ณต์กํ ๋ก์ง์ ์์ฑํด์ผ ํ ๋ ์ฌ์ฉํ๋ค.const items = ['Apple', 'Banana', 'Cherry'];const listItem..
2024.05.29