React.Fragment는 무슨 역할을 할까

React.Fragment

React.Fragment는 DOM에 불필요한 노드를 추가하지 않고 여러 요소를 감쌀 수 있게 해주는 React의 유용한 기능입니다.

사용 방법은 아래와 같이 두 가지가 있습니다.

1. 기본형 <React.Fragment></React.Fragment>

2. 축약형 <></>

왜 쓸까?

리액트를 에선 아래와 같은 코드가 SyntaxError가 난다는 것을 알 수 있습니다.

retrun (
	<h1>제목</hi>
  	<p>내용</p>
  	// ! ERROR
)

따라서 어쩔수 없이 의미없는 div태그를 남발하게 되어 우리들을 불편하게 만듭니다...
하지만 React.Fragment을 쓰면 실제 DOM에 요소를 추가하지 않고 리액트에서 엘리먼트들을 묶어 리턴할 수 있게됩니다.

장점

• DOM 구조가 복잡해지지 않는 것이 큰 장점
• CSS 작성이 편리해짐 - React.Fragment 대신 div를 사용하면, 상위 태그에서 flex와 space-between 같은 레이아웃 속성이 제대로 적용되지 않는 경우가 생깁니다.
• table 처럼 정해진 구조를 따를때 - 테이블 내에 div가 있으면 안 되기 때문에 콘솔에 경고가 뜨지만, React.Fragment는 이런 문제를 일으키지 않습니다.

key를 전달해야 할땐 이렇게

map 을 사용할 때는 각 요소에 고유한 key 값을 전달해야 합니다.

<></>

• 위와 같은 축약 문법은 key를 전달할 수 없습니다..

<React.Fragment key={idx}></React.Fragment>

• React.Fragment를 명시적으로 작성해야 key를 전달할 수 있습니다.

  참고: 현재로서는 React.Fragment는 key 외의 props를 받을 수 없습니다.