Fragment ํ๊ทธ
์ฒ์์ ์ปดํฌ๋ํธ๊ด๋ จํด์ ์งง๊ฒ ์ค๋ช ํ๋ ์ปดํฌ๋ํธ์ ๋๋ค.
React์์ ์ ๊ณตํด ์ฃผ๋ ๊ธฐ๋ณธ ์ปดํฌ๋ํธ์ด๋ฉฐ,
๋์ผํ ๋ ๋ฒจ์ ํ๊ทธ๋ฅผ ๋ฐํํด ์ค์ผ ๋ ๋, ๊ทธ ์์๋ก ๋ฌ์์ฃผ๋ ์ฉ๋๋ก ์ฌ์ฉํ๊ฒ ๋ฉ๋๋ค.
๊ทธ๋ ๊ฒ ๋๋ฉด ํ๋์ ํ๊ทธ๊ฐ ๋ฐํ๋๊ธฐ ๋๋ฌธ์ ๋๋ค.
์
(์๊ธด๊ฒ ์ด์ํ๊ธด ํ์ง๋ง...)
์ ์ฒด๋ฅผ <></> ํ๊ทธ๋ก ๊ฐ์ธ์ค์ h1, h2, span 2๊ฐ๊ฐ ๋์ผ ์ ์์ ๋ ๋ฒจ๋ก ๊ทธ๋ ค์ง๊ฒ ๋ฉ๋๋ค.
์๋ฏธ ์๋ div๋ span ๋ฑ ํ๊ทธ๋ฅผ ์ฌ์ฉํ๊ธฐ๋ณด๋ค๋ Fragmentํ๊ทธ๋ฅผ ํ์ฉํ๋ฉด ์ค์ HTML ๊ทธ๋ ค์ง ๋ ์ข ๋ ํจ์จ์ ์ผ๋ก ๊ทธ๋ฆด ์ ์์ต๋๋ค.
๋ฟ๋ง ์๋๋ผ map ๋๋ฆด ๋ ๋ณด๋ฉด, key๊ฐ์ ์ ๋ ฅํด์ผ ๋๋๋ฐ <Fragment key={}> ๋ฅผ ํ์ฉํ ์ ์์ต๋๋ค.
์๊ฐ๋ณด๋ค ์์ฃผ ์ฌ์ฉํ๊ฒ ๋๋ ์ ์ฉํ ํ๊ทธ...
'Front-End > React' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
React] Hook : useCallback & useMemo ์ธ์ ์ฌ์ฉํด์ผ ๋ ๊น? (0) | 2023.06.29 |
---|---|
React] Hook : CustomHook (0) | 2023.06.26 |
React] Hook : useContext ๋จ์ ํด๊ฒฐ (0) | 2023.06.26 |
React] Hook : useContext (0) | 2023.06.23 |
React] Hook : useState ๋น๋๊ธฐ โ ๋๊ธฐ ํ๋ ๋ฒ (0) | 2023.06.22 |