๊ด€๋ฆฌ ๋ฉ”๋‰ด

๋ชฉ๋กXML (1)

Hey Tech

[์—๋Ÿฌ ํ•ด๊ฒฐ] JSX expressions must have one parent element.

์—๋Ÿฌ ์ƒํ™ฉ React ๊ธฐ๋ฐ˜ ํ™”๋ฉด UI ๊ตฌํ˜„ ์ค‘ ์•„๋ž˜ ์—๋Ÿฌ ๋ฉ”์‹œ์ง€ ํ™•์ธ ์—๋Ÿฌ ๋ฉ”์‹œ์ง€ JSX expressions must have one parent element. ์—๋Ÿฌ ์›์ธ - JSX ๋ฌธ๋ฒ•์—์„œ Component๊ฐ€ ์—ฌ๋Ÿฌ ๊ฐœ ์žˆ๋‹ค๋ฉด ๋ฐ˜๋“œ์‹œ parent element๋กœ ๊ฐ์‹ธ์•ผ ํ•˜๋Š”๋ฐ ๊ทธ๋ ‡์ง€ ์•Š์•„์„œ ๋ฐœ์ƒํ•œ ์ด์Šˆ - Component ๋‚ด๋ถ€๋Š” ํ•˜๋‚˜์˜ DOM Tree ๊ตฌ์กฐ๋กœ ์ด๋ฃจ์–ด์ ธ์•ผ ํ•œ๋‹ค๋Š” ๊ทœ์น™์„ ๋”ฐ๋ผ์•ผ ํ•จ ํ•ด๊ฒฐ์ฑ… ๊ฐ„๋‹จํ•˜๊ฒŒ div ํƒœ๊ทธ ๋˜๋Š” fragment ํƒœ๊ทธ ๋˜๋Š” ์ค‘๊ด„ํ˜ธ{}๋กœ ์—ฌ๋Ÿฌ Component๋ฅผ ๊ฐ์‹ธ๋Š” parent element๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์‰ฝ๊ฒŒ ํ•ด๊ฒฐ ๊ฐ€๋Šฅ ํ•ด๊ฒฐ์ฑ… ์˜ˆ์‹œ1: div ํƒœ๊ทธ ... ํ•ด๊ฒฐ์ฑ… ์˜ˆ์‹œ2: fragment ํƒœ๊ทธ ... ํ•ด๊ฒฐ์ฑ… ์˜ˆ์‹œ3: ํƒœ๊ทธ๋ช… ์ƒ๋žต๊ฐ€๋Šฅ ... ํฌ์ŠคํŒ… ๋‚ด์šฉ์— ์˜ค๋ฅ˜๊ฐ€ ์žˆ๋‹ค๋ฉด ์•„..

SW ๊ฐœ๋ฐœ/React JS 2022. 1. 5. 09:35