[React] Fragment에 대해 알아보자

JSX는 하나의 상위 혹은 부모요소를 가져야한다.

 

return은 하나의 값만 반환할 수 있고 JSX는 단순화된 요약본에 가깝다고 생각하면 편하다. 두 개 또는 그 이상의 형제 요소를 반환한다면 이것은 유효하지 않은 자바스크립트 코드이기 때문에 에러를 발생시킨다.

 

 

React.createElement가 대안이 될 수 있는데, 이 문법은 JSX 대신 사용하는 것으로 

const element = createElement(type, props, ...children)

 

이런 방식으로 쓰이며 type은 div, span, 함수, 클래스, Fragment 등이 쓰이며, props 인수는 객체 또는 null이어야 한다. 선택사항으로 ...children이 있는데 필요한 만큼 전달할 수 있다. 하지만, 나는 next.js에서 jsx문법을 이용하여 코드를 작성하였기 때문에 익숙하지 않은 방법이었다.

 

jsx에서는 여러 방식이 있는데,

 

• div : 그냥 div로 감싸는 것이다. 이 모든 값을 감싸는 객체 혹은 배열로 생각할 수 있다. 물론, 이 한계점으로 인해 이 DOM 구조에는 div가 두개 생길 수 밖에 없다. 다소 불필요한 내용이다.
• Fragment :  리액트가 제공하는 대안으로, root 컴포넌트가 필요한 경우 형제 컴포넌트를 감싸는 용도로 사용할 수 있다. 아래의 방식으로 사용한다.

import { Fragment } from 'React'

return (
 <Fragment>
   <Header>
   <div>
     ... contents
   </div>
 </Fragment>
)

 

• <> : 이게 내가 사용해왔던 방식인데, 빈 괄호로 감싸주는 방식이다. 내가 듣는 동영상 강의가 3년 전에 촬영된 것을 감안하면 그 당시 구버전에서는 적용되지 않았다고 하니, 그리 오래된 문법은 아닌 모양이다. 여튼, 불필요하게 Fragment를 import할 필요도 없고 그저 빈 괄호만 쓰면 되니 엄청나게 경제적인 방법이다.

 

물론 앞으로도 <> </> 의 방식으로 코드를 작성할 계획이다. 하지만 간혹 다른 사람의 코드나 레거시를 볼 때, <Fragment>를 보고 읽는 데에 불편함을 느끼거나, 잊어버리고 찾아봐야 하는 것을 방지하기 위해 정리해봤다.