[React] <div>와 <React.Fragment>는 다르다

너무도 당연한 이야기지만 이것때문에 시간을 너무 날려서 기억이나 해두자는 의미로 적어두는 이야기.

공식문서 - Fragments
"Fragments는 DOM에 별도의 노드를 추가하지 않고 여러 자식을 그룹화할 수 있습니다."

프로젝트를 하던 중 flex가 계속 이상하게 먹혀서 이 코드 저 코드 다 뒤적거리면서 하나씩 바꿔봤는데 아무리해도 화면이 이상하게 출력되었다.
그러다가 마지막의 마지막에 혹시 이거? 했던 부분이 있었다. 원래는 습관적으로 Fragment의 축약형인 <> 로 감싸줬었는데, 깜빡하고 냅뒀었던 <div> 가 있었던 것이다.

// 코드의 일부분
return (
 	<div>
 		<GridBox {...styles}>{children}</GridBox>
		...
	</div>
);

내 의도는 그냥 감싸는 용도였다고는 해도 컴퓨터가 내 의도를 알리가 없다. div로 감싸져있으니 당연히 출력되는 화면이 내 의도되로 출력되지 않았었다.

역시 코딩은 이런 사소한 부분을 찾는게 어렵다.