리액트 기반으로 만들어진 프로젝트들에서 우리는 종종 의미 없는 <div>를 정의한 코드들을 볼 수가 있다. 어떤 의미일까?
실제로 사용되지 않는 <div> 태그를 쓰는 이유는 리액트에서 정의한 render() 함수는 반환 값의 루트 요소가 하나만 정의되어야 하기 때문이다. 그렇기 때문에 실제로는 사용하지 않지만 JSX 규칙에 의해 <div>와 같이 감싸는 요소를 정의해줘야 한다. 만약 정의하지 않는다면 오류가 발생한다.
✽ JSX 규칙 : 리액트에서는 하나의 컴포넌트가 여러 개의 엘리먼트들을 반환한다. 리액트를 사용하기 위한 문법인 JSX를 쓸 때, return 문 안에는 반드시 하나의 최상의 태그가 있어야 한다. 이는 리액트가 하나의 컴포넌트만을 리턴할 수 있기 때문이다.
<Fragment>, <></>
<React.Fragment>와 <Fragment>는 <div>와 마찬가지로 감싸는 요소라고 볼 수 있는데 Fragments를 사용하면 DOM에 별도 노드를 추가하지 않고 자식 목록을 그룹화할 수 있다는 장점이 있다. 이렇게 별도 노드를 추가하지 않게 되면 불필요한 DOM 노드가 생성되지 않기 때문에 메모리를 적게 사용하게 된다. 따라서 <div>를 사용하는 것보다 Fragments를 사용하는 것이 더 효율적이라고 할 수 있다.
🔍 <Fragment>의 축약 형태 ⇒ <> </>
<Fragment>의 축약 형태는 따로 import가 필요 없다는 장점이 있지만 attribute나 key 값을 설정할 수 없다는 단점 또한 갖고 있으며 React에서만 동작하기 때문에 사용에 유의해야 한다!
