[React] <></> 와 <React.Fragment> 차이/ Fragment 사용하는 이유

사용하는 이유 

리액트에서는 최상위에 태그를 하나로 감싸줘야하는데 fragment는 메모리를 안쓰고 div태그 없이 태그를 감싸줄수있다.

 

 

<> </> 태그와 Fragments 의 차이점

 

 

ex) key가 있는 Fragments

Fragments에 key가 있다면 <React.Fragment> 문법으로 명시적으로 선언해야 합니다. 예를 들어 정의 목록을 만들기 위해 컬렉션을 fragments 배열로 매핑하는 사용 사례입니다.

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // React는 `key`가 없으면 key warning을 발생합니다.
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

 

참고) 

https://ko.legacy.reactjs.org/docs/fragments.html

Fragments – React