React 기본 제공 컴포넌트 Suspense, Fragment

내장 컴포넌트

React는 특별한 역할을 수행하도록 설계된 내장 컴포넌트가 있다.

기본으로 제공되는 컴포넌트의 역할은 다양한 문제나 요구 사항을 해결하게 도와주며, 개발을 돕기 위한 도구나 특정 문제에 대한 해결책, 성능 최적화를 위한 도구 등이 포함된다.

불필요한 div태그의 사용을 줄여주는 <Fragment>, 비동기 요청을 통해 로딩중일 때의 화면을 보여줄 때 사용하는 <Suspense>등 개발시 자주 사용되는 몇 가지 기본 내장 컴포넌트를 알아보려고 한다.

 

주요 내장 컴포넌트

 

Fragment

<Fragment>는 React의 내장 컴포넌트 중 하나로, 주로 여러 컴포넌트나 요소를 그룹화하는 데 사용된다. <Fragment>의 가장 큰 특징은 불필요한 DOM 노드를 생성하지 않는다는 것이다.

 

주요 특징

DOM 노드를 추가하지 않는다: Fragment는 렌더링 결과에 직접적으로 나타나지 않는다. 따라서 DOM에 추가적인 노드가 생성되지 않는다.

const ParentComponent:React.FC = ()=> {
    return (
        <React.Fragment>
            <ChildComponentA />
            <ChildComponentB />
            <ChildComponentC />
        </React.Fragment>
    );
}

위 코드에서 처럼 자식 컴포넌트를 감싸주는 DOM 노드에서 별도의 스타일이나 기능 추가 없이 단지 자식 컴포넌트를 묶어주기 위해 사용되며 빌드시 DOM 노드에서는 나타나지 않는다.

 

불필요한 div 래퍼를 방지: 과거에는 여러 React 요소나 컴포넌트를 반환할 때, 불필요한 <div>로 그룹화해야 했는데, 이러한 추가적인 <div>는 스타일링, 레이아웃, 성능 등에서 문제를 일으킬 수 있게 된다. 이러한 상황이 발생하는 경우 <Fragment>를 사용하면 불필요하게 생성되는 div로 발생되는 이슈를 피할 수 있게 된다.

 

테이블 등의 특정 HTML 요소 내에서 사용: <table>태그의 <tbody>, <ul>태그의 <li>와 같은 HTML 요소는 자식 요소로 오직 특정 태그만을 허용하는데, <Fragment>는 이러한 제약을 우회하는 데 유용하게 사용될 수 있다.

const TableComponent:React.FC = () => {
 return (
    <table>
         <tbody>
             {items.map(item => (
                 <React.Fragment key={item.id}>
                     <tr>
                         <td>{item.name}</td>
                     </tr>
                     <tr>
                         <td>{item.description}</td>
                     </tr>
                 </React.Fragment>
             ))}
         </tbody>
     </table>
 )
}

 

짧은 문법: <Fragment>는 <></>와 같은 짧은 문법으로도 사용할 수 있지만, map()을 사용한 반복적인 DOM 생성식 속성에 넣어주어야 하는 key 속성을 사용할 경우엔 항상 React.Fragment 형태를 사용해야 한다.

const ListComponent:React.FC = () => {
    return (
        <ul>
            {items.map(item => (
                <React.Fragment key={item.id}> {/* key 속성을 사용하기 위해선 반드시 Fragment를 이용해야한다*/}
                    <li>
                        <p>{item.name}</p>
                    </li>
                    <li>
                        <p>{item.description}</p>
                    </li>
                </React.Fragment>
            ))}
        </ul>
    )
}

 

Suspense

컴포넌트가 준비될 때까지 로딩 표시나 다른 플레이스홀더 컨텐츠를 보여주는 데 사용된다.

특히, React의 Lazy Loading과 함께 사용되며, 컴포넌트나 리소스의 로딩이 완료될 때까지 대기하는 역할을 한다.

 

주요 특징

Lazy Loading과의 통합: React에서는 React.lazy() 함수를 사용해 동적 임포트(dynamic imports)로 컴포넌트를 불러올 수 있는데, 이렇게 불러온 컴포넌트는 Suspense로 감싸서 로딩 상태를 관리할 수 있다.

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}> {/* LazyComponent가 로딩 되는 동안에 fallback에 있는 loading이 렌더링 된다 */}
      <LazyComponent />
    </Suspense>
  );
}

 

다중 Suspense 사용: 여러 개의 지연 로딩 컴포넌트나 리소스를 사용할 때, 각각에 대한 다른 플레이스홀더를 표시하려면 여러 Suspense를 사용할 수 있다.

const LazyComponentA = React.lazy(() => import('./LazyComponentA'));
const LazyComponentB = React.lazy(() => import('./LazyComponentB'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading A...</div>}>
        <LazyComponentA />
      </Suspense>
      <Suspense fallback={<div>Loading B...</div>}>
        <LazyComponentB />
      </Suspense>
    </div>
  );
}