728x90
๋ฐ˜์‘ํ˜•

Fragment 1

React] Fragment <></>

Fragment ํƒœ๊ทธ ์ฒ˜์Œ์— ์ปดํฌ๋„ŒํŠธ๊ด€๋ จํ•ด์„œ ์งง๊ฒŒ ์„ค๋ช…ํ–ˆ๋˜ ์ปดํฌ๋„ŒํŠธ์ž…๋‹ˆ๋‹ค. React์—์„œ ์ œ๊ณตํ•ด ์ฃผ๋Š” ๊ธฐ๋ณธ ์ปดํฌ๋„ŒํŠธ์ด๋ฉฐ, ๋™์ผํ•œ ๋ ˆ๋ฒจ์˜ ํƒœ๊ทธ๋ฅผ ๋ฐ˜ํ™˜ํ•ด ์ค˜์•ผ ๋  ๋•Œ, ๊ทธ ์ƒ์œ„๋กœ ๋‹ฌ์•„์ฃผ๋Š” ์šฉ๋„๋กœ ์‚ฌ์šฉํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ๊ทธ๋ ‡๊ฒŒ ๋˜๋ฉด ํ•˜๋‚˜์˜ ํƒœ๊ทธ๊ฐ€ ๋ฐ˜ํ™˜๋˜๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ์˜ˆ HTML ์‚ฝ์ž… ๋ฏธ๋ฆฌ๋ณด๊ธฐํ•  ์ˆ˜ ์—†๋Š” ์†Œ์Šค (์ƒ๊ธด๊ฒŒ ์ด์ƒํ•˜๊ธด ํ•˜์ง€๋งŒ...) ์ „์ฒด๋ฅผ ํƒœ๊ทธ๋กœ ๊ฐ์‹ธ์ค˜์„œ h1, h2, span 2๊ฐœ๊ฐ€ ๋™์ผ ์„ ์ƒ์˜ ๋ ˆ๋ฒจ๋กœ ๊ทธ๋ ค์ง€๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ์˜๋ฏธ ์—†๋Š” div๋‚˜ span ๋“ฑ ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ๋ณด๋‹ค๋Š” Fragmentํƒœ๊ทธ๋ฅผ ํ™œ์šฉํ•˜๋ฉด ์‹ค์ œ HTML ๊ทธ๋ ค์งˆ ๋•Œ ์ข€ ๋” ํšจ์œจ์ ์œผ๋กœ ๊ทธ๋ฆด ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ map ๋Œ๋ฆด ๋•Œ ๋ณด๋ฉด, key๊ฐ’์„ ์ž…๋ ฅํ•ด์•ผ ๋˜๋Š”๋ฐ ๋ฅผ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ƒ๊ฐ๋ณด๋‹ค ์ž์ฃผ ์‚ฌ์šฉํ•˜๊ฒŒ ๋˜๋Š” ์œ ์šฉํ•œ ํƒœ๊ทธ...

Front-End/React 2023.06.26
728x90
๋ฐ˜์‘ํ˜•