리액트에서는 컴포넌트 안에서 JSX코드를 return하게 되고 이것들이 리액트에 의해서 real DOM에 렌더링되게 됩니다.

컴포넌트에서 JSX의 한계

한계점

리액트를 다뤄보시면서 한번쯤은 이런 경우에 에러를 만나보셨을것 같습니다.
인접한 JSX 요소를 가지고있을때 이것들을 return 하려고 할때 에러를 발생시킵니다.

예)

return (
	<h1>제목</h1>
    <p>내용</p>
)

리액트에서는 하나 이상의 "root" JSX 요소를 반환할 수 없습니다 (변수에도 하나 이상의 "root" JSX 요소를 저장할 수 없음).

해결책

return (
	<div>
    	<h1>제목</h1>
    	<p>내용</p>
    </div>
)

위와 같이 하나의 루트 요소를 반환할 수 있도록 만들어줍니다.
여기서 반드시 div 로 감쌀 필요는 없습니다. 어떤 요소든 가능합니다.

배열([])로 감싸도 되지만 warning이 발생하게 됩니다. 리액트에서는 배열을 사용하면 모든 요소에 key가 필요하다고 경고를 하게 됩니다. (여기서 key가 필요한 이유에 대해서는 다음에 설명하기로 하고 넘어가겠습니다)
key를 속성으로 부여해서 경고메세지를 없앨 수는 있지만 굉장히 귀찮은 일이 되게 됩니다.

또 다른 문제점

<div>
	<div>
    	<div>
            <h1>제목</h1>
            p>내용</p>
    	</div>
    </div>
</div>

리액트에서 앱의 크기가 커지고 컴포넌트가 중첩되면서 불필요한 <div>들이 DOM에 렌더링되게 되고 의미론적인 구조나 의미를 가지지 못하게 됩니다.
또한, CSS 스타일링하는 것에도 문제가 발생할 수 있으며 불필요한 HTML 요소를 랜더링하게 되면 앱의 성능이 떨어지게 됩니다.

해결책

1. Wrapper 컴포넌트

이 방법은 트릭으로 사용할 수 있는 방법입니다.
Wrapper 컴포넌트는 다음과 같이 사용할 수 있습니다.

const Wrapper = props => {
  return props.children;
};

export default Wrapper;

먼저 Wrapper 컴포넌트를 만들어주고,, Wrapper 컴포넌트를 사용할 곳에서 import해줍니다.

return (
	<Wrapper>
    	<h1>제목</h1>
    	<p>내용</p>
    </Wrapper>
)

<div>를 대신해서 <Wrapper>를 사용하게 되면 <div> 중첩을 방지할 수 있습니다. Wrapper는 그저 빈껍데기인 요소가 됩니다.

2. React Fragments

Fragments는 빈껍데기 요소를 만들어주는 역할을 합니다.

return (
	<React.Fragment>
    	    <h1>제목</h1>
            <p>내용</p>
    </React.Fragment>
)

return (
	<>
		<h1>제목</h1>
		<p>내용</p>
    </>
)

프로젝트 설정에 따라 다르겠지만 첫번째 방법은 언제든지 사용할 수 있는 문법입니다.

Fragments를 사용하게되면 빈껍데기 JSX 코드를 만들어주고 DOM에도 요소가 붙지않게 됩니다.

Fragment를 import 하면 <React.Fragment>=><Fragment>로 간략하게 사용할 수 있습니다.