[React] return 시 컴포넌트를 하나로 감싸는 이유 (+JSX 문법)

Intro

안녕하세요. 이번시간에는 React 에서 return 시 컴포넌트를 하나로 감싸는 이유에 대해 알아보도록 하겠습니다. 

 

Why?

React에서 JSX를 사용하면 HTML과 유사한 구문으로 JavaScript를 작성할 수 있습니다. JSX는 JavaScript 표현식이므로, 리액트 컴포넌트의 반환 값으로 여러 요소를 사용하려면 이러한 요소들을 하나의 루트 요소로 묶어주어야 합니다.

 

React의 가상 DOM(virtual DOM)이 기본적으로 단일 루트 노드만을 가지기 때문입니다. 컴포넌트가 여러 요소를 반환하면 React는 요소들을 단일 루트 노드로 꼭 묶어줘야 합니다. 

 

Method

React에서 이러한 작업을 수행하기 위한 일반적인 방법은, 여러 요소들을 <div> 또는 <React.Fragment>와 같은 노드로 묶어주는 것입니다. 이러한 요소들은 가상 DOM에서는 렌더링되지 않으므로 실제 DOM에는 추가적인 요소가 추가되지 않습니다.

 

Tips

React v16 이상에서는 빈 태그(<></>)를 사용하여 React.Fragment 대신 사용할 수 있습니다. 이를 사용할 경우 코드가 더 간결해지며, 불필요한 래퍼 요소가 사라집니다. React에서 여러 요소를 반환할 때는 이러한 요소들을 하나의 루트 요소로 묶어주어야 React가 요소들을 올바르게 렌더링하고 관리할 수 있습니다.