프레그먼트를 알아보자

처음 리액트를 사용해본 사람들은 한번쯤 JSX expressions must have one parent element 에러를 겪어봤을 것이다.

하나의 부모 요소만 반환해야하는데 여러개의 형제 요소를 반환하고 있기 때문에 발생하는 에러다.

function MyComponent() {
  return (
    <h1>Title</h1>
    <p>Hello</p>
  );
}

 

이 때 아무 의미없는 <div>로 감싸주기도 하는데, 프레그먼트를 사용해야 성능 측면에서 더 좋다.

그 동안 아무 생각없이 <div>와 <>를 번갈아가며 쓰던 날을 반성하며 글을 시작한다.

 

먼저 프레그먼트에 대해 알아보자. 이 내용을 이해하려면 DOM 구조를 어느 정도 알고 있어야한다.

 

정의

DOM에 노드를 추가하지 않고도 리액트 컴포넌트에 자식 요소 목록을 래핑하거나 그룹화할 수 있는 구문

 

사용법

<Fragment> 태그 또는 축약형인 <>빈 태그로 사용

Fragment 태그는 key 속성을 지원하지만 빈 태그는 지원하지 않으므로 만약 목록을 순회해야한다면 Fragment태그를 사용하는게 좋다.

return posts.map((post)=>(
	<Fragment key={post.id}>
    	// 코드
    	</Fragment>
)

 

장점

1. DOM 트리에서 더 빠르고 더 적은 메모리를 사용한다.
   • div 태그를 사용할 경우 불필요하게 DOM 트리가 깊어질 수 있으며 리렌더링 시 불필요한 DOM 요소들이 추가로 처리된다.
2. Flexbox나 CSS Grid는 직접적인 부모-자식 관계를 요구하며, 별도의 <div> 요소를 추가하면 레이아웃이 깨질 수 있다.
   • CSS에서는 부모 요소와 자식 요소의 관계를 기반으로 레이아웃을 계산하기 때문에 불필요한 중첩이 발생하면 의도한 대로 레이아웃이 적용되지 않을 수 있다.
   • 프레그먼트의 경우, DOM에 추가적인 노드를 생성하지 않기 때문에 불필요한 부모 요소가 없으므로 레이아웃을 깨지 않고 React 컴포넌트를 구조화할 수 있다.
3. 추가적인 DOM 노드가 없어 DOM 검사 도구가 덜 복잡하게 표시된다.
   • 노드란?
     • DOM 구조에서 HTML 문서의 각 요소를 뜻한다. 웹 페이지를 구성하는 모든 요소는 DOM 트리에서 하나의 노드로 표현된다. 이 노드는 HTML 요소, 텍스트, 주석 등을 포함한 모든 종류의 데이터가 될 수 있다.
     • 노드들은 부모와 자식 관계로 연결되어 있어 트리 구조를 형성하므로 계층 구조를 형성하고, 이를 DOM 트리라고 말한다. 웹 브라우저는 HTML 문서를 DOM 트리로 변환하여 렌더링한다.
   • 노드의 종류 - 크게 네가지로 나뉨 
     • 엘리먼트 노드(Element Node)
       • div, p와 같은 HTML 태그 자체를 나타내는 노드. DOM 트리에서 가장 흔한 노드 유형이다. 트리 구조에서 부모 자식 관계를 가질 수 있다.
       • <div>Hello, World!</div>
       • 여기서 <div> 태그는 엘리먼트 노드이다.
     • 텍스트 노드(Text Node) 
       • HTML 태그 내부에 포함된 텍스트를 나타내는 노드. 엘리먼트 노드의 자식으로 존재할 수 있으며, 자식 요소를 가질 수 없다.
       • <div>Hello, World!</div>
       • 여기서 Hello, World!는 텍스트 노드이다. 이 텍스트는 <div> 엘리먼트 노드의 자식 노드로 포함된다.
     • 속성 노드(Attribute Node)
       • id, class와 같은 HTML 요소의 속성을 나타내는 노드. 엘리먼트 노드에 속성들이 자식 노드로 포함되지는 않지만, 속성값도 노드로 취급된다.
       • <div id="greeting">Hello, World!</div>
       • 여기서 id="greeting"은 속성 노드이다.
     • 주석 노드(Comment Node)
       • HTML에서 주석을 나타내는 노드이다. 화면에 보이지는 않지만 DOM 트리에서는 노드로 존재한다.