React Fragments 개념과 사용법

React Fragments 개념과 사용법

리액트에서는 JSX로 작업하며 JSX는 컴포넌트에서 반환하는 코드이다.

리액트는 이 코드를 실제 DOM으로 렌더링한다.

하지만 JSX에는 제한 사항이 있다.

루트 수준에서 JSX 요소들이 인접해 있으면 오류가 발생한다. 리액트에서 일반적으로 루트 JSX 요소는 1개여야 한다.

이것은 유효한 자바스크립트 문법이 아니기 때문이다. 자바스크립트에서는 둘 이상의 값을 반환 할 수 없다.

JSX 코드는 리액트 createElement를 통해서 변환되며 단 1번의 createElement 호출만 반환 되어야 한다.

이 문제를 해결하기 위해서는 2가지 방법이 있다.

1. 요소 배열 반환

첫 번째로는 반환하고자 하는 요소들을 배열로 만들어서 요소 배열을 반환하는 방법이다. 하지만 배열로 작업할 때마다 리액트는 모든 요소에 대한 키를 필요로 한다. 이 방법에서도 예외는 아니다.

데이터 리스트 안에서 동적으로 매핑하고 그 데이터들을 JSX 요소에 매핑하려면 키가 필요하다. 그래서 일반적으로 이렇게 해결하지는 않는다. 매번 키를 추가하고 배열로 감싸는 건 번거롭기 때문이다.

2. 루트 요소로 감싸기

그래서 여러 요소를 div 태그와 같이 루트 요소를 새로 만들어 감싸는 방법을 사용한다. 하지만 이 방법 또한 문제가 있다. 바로 div soup라는 문제이다.

꽤 흔하게 일어날 수 있는 일인데 실제 DOM으로 렌더링될 때 모든 컴포넌트들은 여러 가지 이유로 div로 감쌀 필요가 있다.

이러한 불필요한 div들이 모두 실제 DOM으로 렌더링된다.

div가 필요한 이유는 JSX의 요구 사항 또는 제한 사항 때문일 수도 있는데 그것은 페이지에 어떤 구조적인 의미도 없이 존재하는 것이다.

그러나 그것들은 스타일링을 할 때 문제가 될 수 있다. 어딘가에 감싸는 div태그가 있을 때 중첩된 CSS 선택자를 사용한다면 스타일링을 깨질 수 있다. 또한 스타일링에 지장을 주지 않더라도

좋은 관행은 아니다. 너무 많은 HTML 요소를 렌더링하면 애플리케이션이 느려지고 수정을 위한 작업에서 모든 요소를 확인해야하는 번거로움이 있다.

사용자 정의 Wrapper

이러한 문제점을 해결하기 위해서 Wrapper를 사용한다. 사용자 정의 Wrapper Component를 만들어서 props의 children만 리턴하도록 한다.

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

export default Wrapper;

루트 div는 아무런 의미 없이 JSX 요구 사항을 충족하기 위해 존재한다. Wrapper또한 props.children을 반환만 담당하고 있으며 JSX 요구 사항을 충족시킨다. 요구 사항은 단 하나의 루트 요소만 반환해야 하는데 루트요소는 Wrapper 하나이며 Wrapper 내에서도 반환 값은 props.children 하나 이다.

Fragments

사용자 정의 Wrapper를 사용할 수 있지만 그럴 필요는 없다. 이미 React 내에서 지원하기때문이다. 바로 Fragment Component이다.

return (
    <React.Fragmentr>
      <Component/>
    </React.Fragment>
  );

단축 문법으로 이렇게 사용할 수 있다.

return (
    <>
      <Component/>
    </>
  );