React.fragment는 무엇일까?

<React.fragment>

- JSX 규칙 상, 하나의 태그로 묶어서 리턴을 해야하는 상황이 발생함(이때, React.fragment를 사용)

- 컴포넌트에서 2개 이상의 요소를 리턴하고 싶을 때 사용

- DOM에 별도의 노드를 추가하지 않음(strict mode와 동일)

- React v16에 추가된 기능

사용 방법

1. <React.Fragment> 사용

- 명시적으로 이렇게 작성하는 것이 가장 바람직함

<React.Fragment>
  <a href="#">hi</a>
  <p>nice to meet U</p>
</React.Fragment>

 

2. 축약문 <></> 사용

- 작성하기 간편해서 많이 이용하는 방법

<>
  <a href="#">hi</a>
  <p>nice to meet U</p>
</>

 

3. <div> 사용

- 명확하지 않으며 DOM 생성되므로 피해야할 방법

<div>
  <a href="#">hi</a>
  <p>nice to meet U</p>
</div>