[삽질기록] <></> (framgent) 태그와 div태그의 차이

리액트에서는 컴포넌트 당 하나의 컴포넌트를 반환한다

만약 여러 개의 컴포넌트를 반환하고 싶다면, 최상위에 빈태그 혹은 div태그를 감싸서 반환한다

 

이때 사용하는 두 태그의 차이점은 무엇일까?

 

부모 요소가 시각적인 기능을 하지 않는다면, Framgent 태그를 사용하는 것이 좋다!

 

1. Framgent <>...</>

Framgent 태그는 DOM 요소에 등록되지 않아 레이아웃/스타일링에 영향을 주지 않는다

일반적으로 빈태그를 사용하지만 명시적으로 Framgent 를 작성해야하는 경우가 있다

바로 반복해서 여러 요소를 렌더링할 때이다

react에서는 요소들이 반복해서 렌더링 될 때 key를 입력해줘야 한다

function Blog() {
  return posts.map(post =>
    <Fragment key={post.id}>
      <PostTitle title={post.title} />
      <PostBody body={post.body} />
    </Fragment>
  );
}

 

 

2. div <div>...</div>

렌더링 시 div태그가 생성된다

만약 부모요소의 100%를 지정했는데 예상과 다른 결과가 나온다면 최상위 컴포넌트에 div태그를 사용하지 않았는지 확인해보는 것을 추천한다 🥲🥲🥲🥲