๋ ๊นจ๋ํ๊ณ ํจ์จ์ ์ธ ์ปดํฌ๋ํธ๋ฅผ ์ํด React Fragment์ ์ฌ์ฉ๋ฒ, ์ฅ์ ๋ฐ ๋ค์ํ ๋ฐํ ํจํด์ ์ดํด๋ณด๋ ์ข ํฉ ๊ฐ์ด๋์ ๋๋ค.
React Fragment: ์ฌ๋ฌ ์์ ๋ฐํ ํจํด ๋ง์คํฐํ๊ธฐ
React์์ ์ปดํฌ๋ํธ๋ ๋จ์ผ ๋ฃจํธ ์์๋ฅผ ๋ ๋๋งํ๋๋ก ์ค๊ณ๋์์ต๋๋ค. ์ด ๊ธฐ๋ณธ์ ์ธ ๊ท์น์ ์ปดํฌ๋ํธ์์ ์ฌ๋ฌ ์์๋ฅผ ๋ฐํํด์ผ ํ ๋ ์ข
์ข
์ด๋ ค์์ ์ผ๊ธฐํฉ๋๋ค. ์ ํต์ ์ผ๋ก ๊ฐ๋ฐ์๋ค์ ์ด๋ฌํ ์์๋ค์ <div>๋ก ๊ฐ์ธ๋ ๋ฐฉ๋ฒ์ ์ฌ์ฉํ์ต๋๋ค. ๊ทธ๋ฌ๋ ์ด ๋ฐฉ๋ฒ์ ๋ถํ์ํ ๋
ธ๋๋ฅผ DOM์ ์ถ๊ฐํ์ฌ ์ฑ๋ฅ์ ์ํฅ์ ๋ฏธ์น๊ณ ์คํ์ผ๋ง์ ๋ณต์กํ๊ฒ ๋ง๋ค ์ ์์ต๋๋ค. React Fragment๋ ์ด ๋ฌธ์ ์ ๋ํ ์ฐ์ํ ํด๊ฒฐ์ฑ
์ ์ ๊ณตํ์ฌ DOM์ ์ถ๊ฐ ๋
ธ๋๋ฅผ ์ถ๊ฐํ์ง ์๊ณ ๋ ์์ ๋ชฉ๋ก์ ๊ทธ๋ฃนํํ ์ ์์ต๋๋ค.
React Fragment๋ ๋ฌด์์ธ๊ฐ?
React Fragment๋ React 16.2์ ๋์ ๋ ๊ธฐ๋ฅ์ผ๋ก, ์ถ๊ฐ DOM ๋ ธ๋๋ฅผ ๋์ ํ์ง ์๊ณ ๋ ์ปดํฌ๋ํธ์์ ์ฌ๋ฌ ์์๋ฅผ ๋ฐํํ ์ ์์ต๋๋ค. ์ด๋ ๋ณด์ด์ง ์๋ ๋ํผ ์ญํ ์ ํ๋ฉฐ HTML ๊ตฌ์กฐ์ ์ํฅ์ ์ฃผ์ง ์์ผ๋ฉด์ ์์๋ฅผ ํจ๊ณผ์ ์ผ๋ก ๊ทธ๋ฃนํํฉ๋๋ค. ์ด๋ฅผ ํตํด ๋ ๊นจ๋ํ DOM ๊ตฌ์กฐ, ํฅ์๋ ์ฑ๋ฅ ๋ฐ ๋ ์ฌ์ด ์คํ์ผ๋ง์ด ๊ฐ๋ฅํฉ๋๋ค.
React Fragment๋ฅผ ์ฌ์ฉํ๋ ์ด์ ?
- ๋ ๊นจ๋ํ DOM: ๋ถํ์ํ
<div>๋ํผ๋ฅผ ํผํ์ฌ ๋ ๊นจ๋ํ๊ณ ์๋ฏธ๋ก ์ ์ธ DOM ๊ตฌ์กฐ๋ฅผ ๋ง๋ญ๋๋ค. - ํฅ์๋ ์ฑ๋ฅ: DOM ๋ ธ๋ ์๋ฅผ ์ค์ฌ ์ฑ๋ฅ ํฅ์์ผ๋ก ์ด์ด์ง ์ ์์ผ๋ฉฐ, ํนํ ๋ณต์กํ ์ ํ๋ฆฌ์ผ์ด์ ์์ ๋์ฑ ๊ทธ๋ ์ต๋๋ค.
- ๊ฐ์ํ๋ ์คํ์ผ๋ง: ์ถ๊ฐ ๋ํผ ์์๋ฅผ ํผํ๋ฏ๋ก ์คํ์ผ ์ถฉ๋์ ๋ฐฉ์งํ๊ณ ์คํ์ผ์ ์ฌ๋ฐ๋ฅด๊ฒ ์ ์ฉํ๊ธฐ๊ฐ ๋ ์ฝ์ต๋๋ค.
- ์ ํจํ HTML: ์ฌ๋ฌ ์ต์์ ์์(์:
<tbody>๋ด์ ํ ์ด๋ธ ํ)๋ฅผ ๋ฐํํด์ผ ํ๋ ์ปดํฌ๋ํธ๋ฅผ ๋ค๋ฃฐ ๋ ํนํ ์ ํจํ HTML ๊ตฌ์กฐ๋ฅผ ์ ์งํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.
React Fragment๋ฅผ ์ฌ์ฉํ๋ ๋ค์ํ ๋ฐฉ๋ฒ
React๋ Fragment๋ฅผ ๊ตฌํํ๋ ์ฌ๋ฌ ๊ฐ์ง ๋ฐฉ๋ฒ์ ์ ๊ณตํ๋ฉฐ, ๊ฐ ๋ฐฉ๋ฒ์๋ ๊ณ ์ ํ ๊ตฌ๋ฌธ๊ณผ ์ฌ์ฉ ์ฌ๋ก๊ฐ ์์ต๋๋ค.
1. ๋ช
์์ ์ธ React.Fragment ๊ตฌ๋ฌธ
Fragment๋ฅผ ์ฌ์ฉํ๋ ๊ฐ์ฅ ๋ช
์์ ์ธ ๋ฐฉ๋ฒ์ React ๊ฐ์ฒด๋ฅผ ๊ฐ์ ธ์ React.Fragment ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์
๋๋ค.
import React from 'react';
function MyComponent() {
return (
Hello, world!
This is a fragment example.
);
}
export default MyComponent;
์ด ์ ๊ทผ ๋ฐฉ์์ ๋ช ํํ๊ณ ์ฝ๊ธฐ ์ฌ์ฐ๋ฏ๋ก ์ด๋ณด์๋ ๋ช ์์ฑ์ด ์ ํธ๋๋ ๊ฒฝ์ฐ์ ์ข์ ์ ํ์ ๋๋ค.
2. ์งง์ ๊ตฌ๋ฌธ(<></>)
React๋ ๋ํ ๋น ํ๊ทธ <></>๋ฅผ ์ฌ์ฉํ๋ Fragment์ ๋ํ ์ถ์ฝ ๊ตฌ๋ฌธ์ ์ ๊ณตํฉ๋๋ค. ์ด๊ฒ์ Fragment๋ฅผ ์ฌ์ฉํ๋ ๋ ๊ฐ๊ฒฐํ๊ณ ์ข
์ข
์ ํธ๋๋ ๋ฐฉ๋ฒ์
๋๋ค.
function MyComponent() {
return (
<>
Hello, world!
This is a fragment example.
>
);
}
์ด ๊ตฌ๋ฌธ์ ๋ ์งง๊ณ ๊น๋ํ์ฌ ๊ฐ๊ฒฐํจ์ด ์ค์ํ ์ํฉ์ ์ด์์ ์
๋๋ค. ๊ทธ๋ฌ๋ ์ด ๊ตฌ๋ฌธ์ ํค ๋๋ ์์ฑ์ Fragment์ ์ง์ ์ ๋ฌํ๋ ๊ฒ์ ์ง์ํ์ง ์์ต๋๋ค. ํค ๋๋ ์์ฑ์ ์ฌ์ฉํด์ผ ํ๋ ๊ฒฝ์ฐ ๋ช
์์ ์ธ React.Fragment ๊ตฌ๋ฌธ์ ์ฌ์ฉํด์ผ ํฉ๋๋ค.
3. Fragment์ ํจ๊ป ํค ์ฌ์ฉํ๊ธฐ
Fragment๋ก ์์ ๋ชฉ๋ก์ ๋ ๋๋งํ ๋ ๊ฐ ์์์ ํค๋ฅผ ์ ๊ณตํด์ผ ํ ์ ์์ต๋๋ค. ํค๋ React๊ฐ ์ด๋ค ํญ๋ชฉ์ด ๋ณ๊ฒฝ, ์ถ๊ฐ ๋๋ ์ ๊ฑฐ๋์๋์ง ์๋ณํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค. ์งง์ ๊ตฌ๋ฌธ์ ์ฌ์ฉํ๋ฉด `key` prop์ Fragment์ ์ง์ ์ ๋ฌํ ์ ์์ต๋๋ค. ๋์ ๋ช
์์ ์ธ React.Fragment ๊ตฌ๋ฌธ์ ์ฌ์ฉํด์ผ ํฉ๋๋ค.
import React from 'react';
function MyComponent(props) {
return (
{props.items.map(item => (
- {item.name}
- {item.description}
))}
);
}
export default MyComponent;
์ด ์์์ ์ฐ๋ฆฌ๋ ํญ๋ชฉ ๋ชฉ๋ก์ ๋ ๋๋งํ๊ณ ์์ผ๋ฉฐ ๊ฐ ํญ๋ชฉ์ ํญ๋ชฉ์ ID์์ ํ์๋ ๊ณ ์ ํ ํค๊ฐ ์๋ React.Fragment๋ก ๋ํ๋ฉ๋๋ค. ์ด๋ React๊ฐ ํญ๋ชฉ์ด ๋ณ๊ฒฝ๋ ๋ ๋ชฉ๋ก์ ํจ์จ์ ์ผ๋ก ์
๋ฐ์ดํธํ๋ ๋ฐ ์ค์ํฉ๋๋ค.
์ผ๋ฐ์ ์ธ ์ฌ์ฉ ์ฌ๋ก ๋ฐ ๋ฐํ ํจํด
Fragment๋ ๋ค์ฌ๋ค๋ฅํ๋ฉฐ ๋ค์ํ ์๋๋ฆฌ์ค์์ React ์ปดํฌ๋ํธ๋ฅผ ๊ฐ์ ํ๋ ๋ฐ ์ฌ์ฉํ ์ ์์ต๋๋ค. ๋ค์์ ๋ช ๊ฐ์ง ์ผ๋ฐ์ ์ธ ์ฌ์ฉ ์ฌ๋ก ๋ฐ ๋ฐํ ํจํด์ ๋๋ค.
1. ์ฌ๋ฌ ์ต์์ ์์ ๋ฐํ
๊ฐ์ฅ ๊ธฐ๋ณธ์ ์ธ ์ฌ์ฉ ์ฌ๋ก๋ ์ถ๊ฐ ๋ํผ๋ฅผ ์ถ๊ฐํ์ง ์๊ณ ์ฌ๋ฌ ์์๋ฅผ ๋ฐํํ๋ ๊ฒ์ ๋๋ค. ์ด๋ DOM์ ๋ถํ์ํ ๋ ธ๋๋ฅผ ๋์ ํ์ง ์์ผ๋ ค๋ ๊ฒฝ์ฐ ํนํ ์ ์ฉํฉ๋๋ค.
function MyComponent() {
return (
<>
Title
Content here.
>
);
}
2. ํ ์ด๋ธ ํ ๋ ๋๋ง
<tbody> ๋ด์์ ํ
์ด๋ธ ํ(<tr>)์ ๋ ๋๋งํ ๋ Fragment๋ ์ ํจํ HTML์ ์ ์งํ๋ ๋ฐ ํ์์ ์
๋๋ค. ํ ์ฃผ์์ <div> ๋ํผ๋ ํ
์ด๋ธ ๊ตฌ์กฐ๋ฅผ ์์์ํต๋๋ค.
function MyTableBody(props) {
return (
{props.data.map(row => (
{row.name}
{row.value}
))}
);
}
3. ๋ ์ด์์ ์ปดํฌ๋ํธ ์์ฑ
Fragment๋ฅผ ์ฌ์ฉํ์ฌ ์ถ๊ฐ DOM ๋ ธ๋๋ฅผ ๋์ ํ์ง ์๊ณ ๋ ์ ํ๋ฆฌ์ผ์ด์ UI๋ฅผ ๊ตฌ์ฑํ๋ ๋ ์ด์์ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค.
function TwoColumnLayout(props) {
return (
<>
{props.left}
{props.right}
>
);
}
4. ์กฐ๊ฑด๋ถ ์์ ๋ ๋๋ง
Fragment๋ฅผ ์กฐ๊ฑด๋ถ ๋ ๋๋ง๊ณผ ๊ฒฐํฉํ์ฌ ์ถ๊ฐ ๋ํผ๋ฅผ ๋์ ํ์ง ์๊ณ ํน์ ์กฐ๊ฑด์ ๋ฐ๋ผ ๋ค๋ฅธ ์์๋ฅผ ํ์ํ ์ ์์ต๋๋ค.
function MyComponent(props) {
return (
<>
{props.isLoading ? (
Loading...
) : (
<>
Data Loaded!
Here is the data.
>
)}
>
);
}
5. Null ๋๋ Fragment ๋ฐํ
๋๋ก๋ ์๋ฌด ๊ฒ๋ ์กฐ๊ฑด๋ถ๋ก ๋ ๋๋งํ์ง ์์ ์ ์์ต๋๋ค. ๋น ๋ฌธ์์ด์ด๋ `undefined`๋ฅผ ๋ฐํํ๋ ๋์ (๋๋ก๋ ๋ฌธ์ ๋ฅผ ์ผ์ผํฌ ์ ์์) `null` ๋๋ ๋น Fragment๋ฅผ ๋ฐํํ๋ ๊ฒ์ด ์ด๋ฅผ ์ฒ๋ฆฌํ๋ ๊น๋ํ ๋ฐฉ๋ฒ์ ๋๋ค.
function MyComponent(props) {
if (!props.showContent) {
return null; // Or return <>>;
}
return (
<>
Content
This content is only shown when showContent is true.
>
);
}
Fragment ์ฌ์ฉ์ ์ด์
Fragment ์ฌ์ฉ์ ์ด์ ์ ๋จ์ํ ๋ ๊นจ๋ํ DOM ๊ตฌ์กฐ ์ด์์ผ๋ก ํ์ฅ๋ฉ๋๋ค. ์ด๋ ์ ๋ฐ์ ์ธ ์ฝ๋ ์ ์ง ๊ด๋ฆฌ์ฑ, ์ฑ๋ฅ ๋ฐ ๊ฐ๋ฐ์ ๊ฒฝํ์ ๊ธฐ์ฌํฉ๋๋ค.
1. ํฅ์๋ ์ฑ๋ฅ
DOM ๋ ธ๋ ์๋ฅผ ์ค์ด๋ฉด ์ฑ๋ฅ์ด ํฅ์๋ฉ๋๋ค. ๋ธ๋ผ์ฐ์ ๋ DOM์ ๋ ๋๋งํ๊ณ ์ ๋ฐ์ดํธํ๋ ๋ฐ ๋ ์ ์ ์์ ์ ์ํํด์ผ ํ๋ฏ๋ก ํ์ด์ง ๋ก๋ ์๊ฐ์ด ๋นจ๋ผ์ง๊ณ ์ฌ์ฉ์ ์ํธ ์์ฉ์ด ๋ ์ํํด์ง๋๋ค. ์ฑ๋ฅ ํฅ์์ ์์ ์ปดํฌ๋ํธ์ ๊ฒฝ์ฐ ๋ฌด์ํ ์ ์์ง๋ง ๊น์ด ์ค์ฒฉ๋ ์ปดํฌ๋ํธ๊ฐ ์๋ ๋ณต์กํ ์ ํ๋ฆฌ์ผ์ด์ ์์๋ ์๋นํ ์ํฅ์ ๋ฏธ์น ์ ์์ต๋๋ค.
2. ๋ ์ฌ์ด ์คํ์ผ๋ง
์ถ๊ฐ ๋ํผ ์์๋ฅผ ํผํ๋ฉด ์คํ์ผ๋ง์ด ๊ฐ์ํ๋ฉ๋๋ค. ๋ถํ์ํ <div> ์์๋ก ์ธํ ์๋ํ์ง ์์ ์คํ์ผ ์์ ๋๋ ์ถฉ๋์ ๋ํด ๊ฑฑ์ ํ ํ์๊ฐ ์์ต๋๋ค. ์ด๋ฅผ ํตํด ์คํ์ผ์ ์ฌ๋ฐ๋ฅด๊ฒ ์ ์ฉํ๊ณ ์ ํ๋ฆฌ์ผ์ด์
์ ์ฒด์์ ์ผ๊ด๋ ์๊ฐ์ ๋ชจ์์ ์ ์งํ๊ธฐ๊ฐ ๋ ์ฌ์์ง๋๋ค.
3. ๋ ๊นจ๋ํ ์ฝ๋ ๋ฐ ๊ฐ๋ ์ฑ
Fragment๋ ๋ ๊นจ๋ํ๊ณ ์ฝ๊ธฐ ์ฌ์ด ์ฝ๋๋ฅผ ์ด์งํฉ๋๋ค. ๋ถํ์ํ ๋ํผ ์์๊ฐ ์์ผ๋ฉด ์ปดํฌ๋ํธ ๊ตฌ์กฐ๋ฅผ ์ดํดํ๊ณ ์ ์ง ๊ด๋ฆฌํ๊ธฐ๊ฐ ๋ ์ฌ์์ง๋๋ค. ์ด๋ ์ฝ๋ ๋ช ํ์ฑ์ด ํ์ ๋ฐ ์ฅ๊ธฐ์ ์ธ ์ ์ง ๊ด๋ฆฌ์ ์ค์ํ ๋๊ท๋ชจ ํ๋ก์ ํธ์์ ํนํ ์ค์ํฉ๋๋ค.
4. ์ ํจํ์ง ์์ HTML ๋ฐฉ์ง
Fragment๋ React ์ปดํฌ๋ํธ๊ฐ ์ ํจํ HTML์ ์์ฑํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค. ํ ์ด๋ธ ์์์ ๊ฐ์ ํน์ HTML ๊ตฌ์กฐ์๋ ํน์ ๋ถ๋ชจ-์์ ๊ด๊ณ๊ฐ ํ์ํฉ๋๋ค. ํ์ฉ๋์ง ์๋ ์์น์ `div`๋ฅผ ์ฌ์ฉํ๋ฉด HTML์ด ์์๋๊ณ ์๊ธฐ์น ์์ ๋ ๋๋ง ๋ฌธ์ ๊ฐ ๋ฐ์ํ ์ ์์ต๋๋ค.
์ค์ฉ์ ์ธ ์: ๊ธ๋ก๋ฒ ์ ํ๋ฆฌ์ผ์ด์
Fragment๊ฐ ๊ธ๋ก๋ฒ ์ ํ๋ฆฌ์ผ์ด์ ๊ณผ ๊ด๋ จ๋ ์๋๋ฆฌ์ค์์ ์ด๋ป๊ฒ ์ ์ฉ๋ ์ ์๋์ง ์ดํด๋ณด๊ฒ ์ต๋๋ค.
1. ๋ค๊ตญ์ด ์ง์
์ฌ๋ฌ ์ธ์ด๋ฅผ ์ง์ํ๋ ์น ์ฌ์ดํธ๋ฅผ ๊ตฌ์ถํ๋ค๊ณ ์์ํด ๋ณด์ญ์์ค. ํ ์คํธ ๋ธ๋ก์ ๋ค๋ฅธ ๋ฒ์ ์ ์กฐ๊ฑด๋ถ๋ก ๋ ๋๋งํด์ผ ํ ์ ์์ต๋๋ค. Fragment๋ ์ถ๊ฐ DOM ๋ ธ๋๋ฅผ ์ถ๊ฐํ์ง ์๊ณ ์ด๋ฅผ ๋ฌ์ฑํ๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค.
import React from 'react';
function MultiLanguageText(props) {
const { language, translations } = props;
return (
<>
{translations[language] ? (
{translations[language]}
) : (
{translations['en']}
)}
>
);
}
export default MultiLanguageText;
์ด ์์์ ์ปดํฌ๋ํธ๋ ์ ํํ ์ธ์ด์ ๋ฐ๋ผ ์ ์ ํ ๋ฒ์ญ์ ๋ ๋๋งํฉ๋๋ค. ํ์ฌ ์ธ์ด์ ๋ํ ๋ฒ์ญ์ด ์๋ ๊ฒฝ์ฐ ๊ธฐ๋ณธ์ ์ผ๋ก ์์ด๋ก ์ค์ ๋ฉ๋๋ค.
2. ๊ตญ์ ์ ํ ๋ฒํธ ํ์
๋ค๋ฅธ ๊ตญ๊ฐ์ ์ ํ ๋ฒํธ๋ฅผ ํ์ํ ๋ ์ง์ญ์ ๋ฐ๋ผ ๋ค๋ฅด๊ฒ ํฌ๋งทํด์ผ ํ ์ ์์ต๋๋ค. Fragment๋ ์ถ๊ฐ ๋ํผ๋ฅผ ๋์ ํ์ง ์๊ณ ์ ํ ๋ฒํธ ์ปดํฌ๋ํธ๋ฅผ ๊ทธ๋ฃนํํ๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค.
import React from 'react';
function PhoneNumber(props) {
const { countryCode, number } = props;
return (
<>
+{countryCode}
{number}
>
);
}
export default PhoneNumber;
์ด ์ปดํฌ๋ํธ๋ ๊ตญ๊ฐ ์ฝ๋์ ์ ํ ๋ฒํธ๋ฅผ ๋ณ๋์ span์ผ๋ก ํ์ํ์ฌ ์ง์ญ์ ๋ฐ๋ผ ์ ์ฐํ ์คํ์ผ๋ง ๋ฐ ํฌ๋งท์ด ๊ฐ๋ฅํฉ๋๋ค.
3. ๋ ์ง ๋ฐ ์๊ฐ ํ์ ์ฒ๋ฆฌ
์ฌ์ฉ์ ๋ก์บ์ ๋ฐ๋ผ ๋ค๋ฅธ ํ์์ผ๋ก ๋ ์ง์ ์๊ฐ์ ํ์ํ๋ ๊ฒ์ ๊ธ๋ก๋ฒ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ผ๋ฐ์ ์ธ ์๊ตฌ ์ฌํญ์ ๋๋ค. Fragment๋ ์ถ๊ฐ DOM ๋ ธ๋๋ฅผ ์ถ๊ฐํ์ง ์๊ณ ๋ ์ง ๋ฐ ์๊ฐ ์ปดํฌ๋ํธ๋ฅผ ๊ตฌ์ฑํ๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค.
import React from 'react';
import { DateTime } from 'luxon'; // Example using Luxon library
function FormattedDate(props) {
const { date, locale } = props;
const formattedDate = DateTime.fromISO(date).setLocale(locale).toLocaleString(DateTime.DATE_FULL);
return (
<>
>
);
}
export default FormattedDate;
์ด ์ปดํฌ๋ํธ๋ Luxon๊ณผ ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ฌ ๋ ์ง ํ์์ ์ฒ๋ฆฌํ์ฌ ์ง์ ๋ ๋ก์บ์ ๋ฐ๋ผ ๋ ์ง ํ์์ ์ง์ ํฉ๋๋ค. `time` ์์๋ ๋ ์ง์ ๋ํ ์๋ฏธ๋ก ์ ์๋ฏธ๋ฅผ ์ ๊ณตํฉ๋๋ค.
Fragment ์ฌ์ฉ์ ์ํ ๋ชจ๋ฒ ์ฌ๋ก
Fragment์ ์ด์ ์ ๊ทน๋ํํ๋ ค๋ฉด ๋ค์ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๋ฐ๋ฅด์ญ์์ค.
- ๊ฐ๋ฅํ๋ฉด ์งง์ ๊ตฌ๋ฌธ(
<></>)์ ์ฌ์ฉํ์ญ์์ค. ์ด๋ ๊ฒ ํ๋ฉด ์ฝ๋๊ฐ ๋ ๊นจ๋ํ๊ณ ๊ฐ๊ฒฐํด์ง๋๋ค. - ํค ๋๋ ์์ฑ์ ์ ๊ณตํด์ผ ํ ๋๋ ๋ช
์์ ์ธ
React.Fragment๊ตฌ๋ฌธ์ ์ฌ์ฉํ์ญ์์ค. ์ด๋ ์์ ๋ชฉ๋ก์ ๋ ๋๋งํ ๋ ํ์์ ์ ๋๋ค. - ๋ถํ์ํ Fragment๋ฅผ ํผํ์ญ์์ค. ๋จ์ผ ์์๋ฅผ Fragment๋ก ๋ํํ์ง ๋ง์ญ์์ค. ์ฌ๋ฌ ์์๋ฅผ ๋ฐํํด์ผ ํ ๋๋ง ์ฌ์ฉํ์ญ์์ค.
- ๋ ์ด์์ ์ปดํฌ๋ํธ์์ Fragment ์ฌ์ฉ์ ๊ณ ๋ คํ์ญ์์ค. ์ด๋ ๊ฒ ํ๋ฉด ๋ ๊นจ๋ํ๊ณ ์ ์ฐํ ๋ ์ด์์์ ๋ง๋ค ์ ์์ต๋๋ค.
- ์ฑ๋ฅ์ ๋ฏธ์น๋ ์ํฅ์ ์ผ๋์ ๋์ญ์์ค. Fragment๋ ์ผ๋ฐ์ ์ผ๋ก ์ฑ๋ฅ์ ํฅ์์ํค์ง๋ง ๊น์ด ์ค์ฒฉ๋ Fragment๋ฅผ ๊ณผ๋ํ๊ฒ ์ฌ์ฉํ๋ฉด ์ฑ๋ฅ์ ์ํฅ์ ๋ฏธ์น ์ ์์ต๋๋ค. ์ ํ๋ฆฌ์ผ์ด์ ์ ํ๋กํ์ผ๋งํ์ฌ ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ ์๋ณํ์ญ์์ค.
React Fragment์ ๋์
Fragment๋ ์ผ๋ฐ์ ์ผ๋ก React์์ ์ฌ๋ฌ ์์๋ฅผ ๋ฐํํ๋ ๋ฐ ๊ถ์ฅ๋๋ ์ ๊ทผ ๋ฐฉ์์ด์ง๋ง ํน์ ์ํฉ์์ ๋ฐ์ํ๊ฑฐ๋ ๊ณ ๋ คํ ์ ์๋ ๋์ฒด ์ ๊ทผ ๋ฐฉ์์ด ์์ต๋๋ค.
1. ์์ ๋ฐฐ์ด ๋ฐํ(๋ ๊ถ์ฅ)
๊ธฐ์ ์ ์ผ๋ก ์ปดํฌ๋ํธ์์ React ์์ ๋ฐฐ์ด์ ๋ฐํ *ํ ์* ์์ต๋๋ค. ๊ทธ๋ฌ๋ ์ด ์ ๊ทผ ๋ฐฉ์์๋ ๋ช ๊ฐ์ง ๋จ์ ์ด ์์ต๋๋ค.
- ํค ํ์: ๋ฐฐ์ด์ ๊ฐ ์์์๋ ๊ณ ์ ํ `key` prop์ด *์์ด์ผ* ํฉ๋๋ค.
- ๋ ์๋ฏธ๋ก ์ : ์ฝ๋์์ ์ฌ๋ฌ ์์๋ฅผ ๋จ์ผ ๋ ผ๋ฆฌ ๋จ์๋ก ๋ฐํํ๊ณ ์๋ค๋ ๊ฒ์ด ์ฆ์ ๋ช ํํ์ง ์์ต๋๋ค.
- React ์ ๋ฐ์ดํธ ๊ด๋ จ ์ ์ฌ์ ๋ฌธ์ : React๋ ์์ ๋ฐฐ์ด์ ์ง์ ์ฒ๋ฆฌํ ๋ DOM์ ํจ์จ์ ์ผ๋ก ์ ๋ฐ์ดํธํ๋ ๋ฐ ๋ ์ด๋ ค์์ ๊ฒช์ ์ ์์ต๋๋ค.
์ด๋ฌํ ์ด์ ๋ก ๋ฐฐ์ด์ ๋ฐํํ๋ ๊ฒ์ ์ผ๋ฐ์ ์ผ๋ก Fragment ๋์ ๊ถ์ฅ๋์ง ์์ต๋๋ค.
2. <div> ๋ํผ ์ฌ์ฉ(์ผ๋ฐ์ ์ผ๋ก ๊ถ์ฅ๋์ง ์์)
์์ ์ธ๊ธํ๋ฏ์ด ์์๋ฅผ <div>๋ก ๋ํํ๋ ๊ฒ์ ๊ธฐ์กด์ (์ข
์ข
๋ฌธ์ ๊ฐ ์๋) ์ ๊ทผ ๋ฐฉ์์
๋๋ค. ์์์ ์ค๋ช
ํ ์ด์ , ์ฆ ๋ ๊นจ๋ํ DOM, ์ฑ๋ฅ ๋ฐ ์คํ์ผ๋ง ๋ฌธ์ ๋ก ์ธํด ๊ฐ๋ฅํ ํ ํผํด์ผ ํฉ๋๋ค.
๊ฒฐ๋ก
React Fragment๋ ๋ ๊นจ๋ํ๊ณ ํจ์จ์ ์ด๋ฉฐ ์ ์ง ๊ด๋ฆฌ ๊ฐ๋ฅํ React ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๋ ๋ฐ ์ ์ฉํ ๋๊ตฌ์ ๋๋ค. ์ถ๊ฐ DOM ๋ ธ๋๋ฅผ ๋์ ํ์ง ์๊ณ ์ฌ๋ฌ ์์๋ฅผ ๋ฐํํ ์ ์๋๋ก ํจ์ผ๋ก์จ Fragment๋ ์ฑ๋ฅ์ ํฅ์์ํค๊ณ ์คํ์ผ๋ง์ ๊ฐ์ํํ๋ฉฐ ๋ ๊นจ๋ํ ์ฝ๋๋ฅผ ์ด์งํฉ๋๋ค. ์์ ์ปดํฌ๋ํธ๋ฅผ ๊ตฌ์ถํ๋ ๋ณต์กํ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๋ Fragment๋ React ํดํท์ ์ผ๋ถ๊ฐ ๋์ด์ผ ํฉ๋๋ค. Fragment๋ฅผ ์ฌ์ฉํ๋ ๋ค์ํ ๋ฐฉ๋ฒ์ ๋ง์คํฐํ๊ณ ๊ทธ ์ด์ ์ ์ดํดํจ์ผ๋ก์จ ๋ ๋์ React ์ฝ๋๋ฅผ ์์ฑํ๊ณ ๋ฐ์ด๋ ์ฌ์ฉ์ ๊ฒฝํ์ ๋ง๋ค ์ ์์ต๋๋ค.
React ์ฌ์ ์ ๊ณ์ํ๋ฉด์ ๋ค์ํ ๋ฐํ ํจํด์ ์ดํด๋ณด๊ณ ํน์ ์๊ตฌ ์ฌํญ์ ๊ฐ์ฅ ์ ํฉํ ์ ๊ทผ ๋ฐฉ์์ ์ ํํ๋ ๊ฒ์ ์์ง ๋ง์ญ์์ค. ๋ค์ํ ์๋๋ฆฌ์ค์์ Fragment๋ฅผ ์คํํ๊ณ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฑ๋ฅ ๋ฐ ๊ตฌ์กฐ์ ๋ฏธ์น๋ ์ํฅ์ ๊ด์ฐฐํ์ญ์์ค. ์ฆ๊ฑฐ์ด ์ฝ๋ฉํ์ธ์!