React ๊ณต์‹ ๋ฌธ์„œ ๋‹ค์‹œ ์ฝ๊ธฐ (1. Main concepts)
์›น (WEB)/๊ณต๋ถ€ 2022. 1. 31. 20:43

Main Concepts ์ฒ˜์Œ React๋ฅผ ์‹œ์ž‘ํ•  ๋•Œ ๊ฑฐ์˜ ์ดํ•ด ๋ชปํ•˜๊ณ  practice ์ •๋„๋งŒ ์ฐธ์กฐํ–ˆ์„ ๋“ฏ ์‹ถ์–ด์„œ ๋‹ค์‹œ ์ฝ์–ด๋ณด์•˜๋‹ค. ๊ฐœ๋…์„ ์ด๋ฒˆ์— ๋ช…ํ™•ํžˆ ํ–ˆ๋‹ค๊ฑฐ๋‚˜ ์ฒ˜์Œ ๋“ค์–ด๋ณธ ๊ฒƒ๋“ค์„ ์ •๋ฆฌํ•ด๋ณด์•˜๋Š”๋ฐ, Main concept์—์„œ๋„ ๊ฝค๋‚˜ ๋งŽ์•˜๋‹ค. ์ด๋ฒˆ ๊ธฐํšŒ๋กœ ํ•ด๋‹น ์ •๋ฆฌ ๊ธ€์„ ์ฃผ๊ธฐ์ ์œผ๋กœ ๋ณด๋„๋ก ํ•ด์•ผ๊ฒ ๋‹ค ๐Ÿ˜Š Introducing JSX React๋Š” ๊ธฐ์กด์— html, js ์™€ ๊ฐ™์ด ๊ธฐ๋Šฅ ๋ณ„๋กœ ๋ฌธ์„œ๋ฅผ ๋‚˜๋ˆ„๋˜ ๋ฐ์—์„œ ํ•œ ์ปดํฌ๋„ŒํŠธ ๋‹จ์œ„๋กœ ๋‚˜๋ˆ„๊ฒŒ ํ•จ์œผ๋กœ์จ js, html(jsx), css๋ฅผ ์ปดํฌ๋„ŒํŠธ ๋‹จ์œ„๋กœ ๋‹ค๋ฃฐ ์ˆ˜ ์žˆ๊ฒŒ ํ•˜์˜€๋‹ค. JSX์˜ ๋‚ด๋ถ€์˜ ๋ณ€์ˆ˜๋“ค์€ ๋ Œ๋” ์‹œ์ ์— ์ด๋ฏธ ๋ฌธ์ž์—ด๋กœ ๋ณ€๊ฒฝ ๋˜๋ฏ€๋กœ XSS ๊ณต๊ฒฉ์„ ํ”ผํ•  ์ˆ˜ ์žˆ๋‹ค. Rendering Elements React๋กœ ๋งŒ๋“ค์–ด์ง„ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์€ ํ•˜๋‚˜์˜ root DOM ๋…ธ๋“œ๋ฅผ ..

[React] React JSX์—์„œ forEach ์•ˆ๋  ๋•Œ
์›น (WEB)/์—๋Ÿฌํ•ด๊ฒฐ 2020. 12. 20. 21:06

React JSX์—์„œ array๋‚˜ dictionary๋ฅผ ๋‹ค๋ฃจ๊ธฐ ์œ„ํ•ด forEach ๋ฌธ์„ ์ผ๋‹ค๋ฉด, map์œผ๋กœ ๋ณ€๊ฒฝํ•ด์•ผํ•œ๋‹ค. map ํ•จ์ˆ˜๋Š” ์—ฐ์‚ฐ ํ›„์— ์ƒ์„ฑ๋œ ๊ฒฐ๊ณผ array / dictionary๋ฅผ ๋ฐ˜ํ™˜ํ•ด์ฃผ๊ธฐ ๋•Œ๋ฌธ์— JSX์—์„œ ๋‚˜ํƒ€๋‚˜๊ฒŒ ๋˜์ง€๋งŒ, forEach๋ฌธ์€ ๋ณ€์ˆ˜์—๋งŒ ์—ฐ์‚ฐ ๊ฒฐ๊ณผ๊ฐ€ ์ ์šฉ๋˜๊ณ  ๋ฐ˜ํ™˜ํ•ด์ฃผ์ง€ ์•Š๋Š”๋‹ค. ๋”ฐ๋ผ์„œ, forEach ๋ฌธ์„ ์‚ฌ์šฉํ•˜๊ฒŒ ๋˜๋ฉด ์—ฐ์‚ฐ๋งŒ ๋˜๊ณ  ๊ฒฐ๊ณผ๋Š” JSX๋กœ ์ถœ๋ ฅ๋˜์ง€ ์•Š๋Š”๋‹ค.