[React] Fragment

---

Fragment

React js에서는 return 문 내부에는 하나의 최상위 태그만 존재해야한다. 하지만 필요에 따라 여러 태그가 최상위에 올라오게 될 경우 <div> 태그를 최상위 태그로 지정하여 사용하는 경우가 발생할 수 있다. 하지만 이는 css 및 코드가 꼬이는 현상을 발생시킬 수 있습니다. 이를 위해 React에서 제공하는 Fragment를 사용할 경우 필요하지 않은 태그를 추가하는 것을 방지할 수 있습니다.

---

Testing

<div> 사용할 경우

Code

function App() {
    return (
        <div>
            <div>
                Test
            </div>
            <div>
                Testing
            </div>
        </div>
    );
}

• 두개의 <div> 태그를 return하기 위해 <div> 태그로 묶음

HTML

• 코드와 개발자 도구로 확인한 HTML 서로 동일

<Fragment> 사용할 경우

Code

import {Fragment} from "react";

function App() {
    return (
        <Fragment>
            <div>
                Test
            </div>
            <div>
                Testing
            </div>
        </Fragment>
    );
}

• 두개의 <div> 태그를 return하기 위해 <Fragment> 태그로 묶음

HTML

• 코드와 개발자 도구로 확인한 HTML에서 <Fragment> 태그가 표현되지 않음

<> </> 사용할 경우

Code

function App() {
    return (
        <>
            <div>
                Test
            </div>
            <div>
                Testing
            </div>
        </>
    );
}

• <Fragment>와 동일한 효과를 사용할 수 있음

정리

<> 태그와 <Fragment> 태그의 기능이 동일하다면 왜 <Fragment> 태그를 사용하는 것일 까요?

<Fragment>태그는 <>태그와 다르게 Key 속성을 부여할 수 있습니다.
따라서 map 함수와 같이 동적으로 태그를 추가하는 코드에서 Key Warning을 방지하기 위해 <Fragment> 태그에 Key 속성을 부여하여 사용하면 오류 발생을 방지할 수 있습니다.

const temp = array.map(item =>
        <Fragment key={item.id}>
            {item.value}<br/>
        </Fragment>
    )

• 이와 같이 키를 지정하여 사용할 경우 Key Warning을 방지할 수 있습니다.

---

마무리

<Fragment> 태그를 활용할 경우 여러개의 태그를 묶기 위해 억지로 <div>를 사용할 필요가 없어지며, CSS 및 코드를 작성할 때 조금 더 편하게 작성할 수 있습니다.
감사합니다.