React Fragment

⚡Fragment

import { Fragment } from 'react'


function App() {
  return (
    <Fragment>
      안녕하세요
    </Fragment>
  );
}

 

Fragment는 리액트 v16이상부터 도입된 기능입니다.

 

Fragment는 무의미한 div사용을 억제해줍니다.

리액트를 사용하게 위해 쓰는 JSX 문법을 사용할 때

return 문 안에 반드시 하나의 최상위 태그가 있어야한다는 규칙때문에

의미없는 div를 만들게 됩니다.

 

이를 위와 같이 import { Fragment } from 'react'를 통해

Fragment를 import하고 위와 같이 최상위 태그를 <fragment>로 묶어주는것으로 사용할 수 있습니다.

---

🔍단축 표현

import { Fragment } from 'react'


function App() {
  return (
    <>
      안녕하세요
    </>
  );
}

이렇게 Fragment라는 단어없이 <>만으로도 표현가능합니다.

훨씬 간결하게 표현되니 리팩토링할때 유용하겠네용