왜 만들었는가?

React에서 컴포넌트의 Return 부분을 분석할 때, 각 컴포넌트의 구성을 순차적으로 이해하는 것이 중요합니다. 그러나 조건부 렌더링을 사용하면 때때로 이 순차적 구성이 명확히 드러나지 않아 혼란스러움을 경험할 수 있습니다. 이러한 문제를 해결하고자, 조건부 렌더링을 보다 명확하고 선언적으로 표현할 수 있는 'ShowChildren' 컴포넌트를 개발하게 되었습니다.

ShowChildren 컴포넌트 소개

'ShowChildren'은 조건부 렌더링을 위한 범용 컴포넌트입니다. _if prop이 참이거나 참을 반환하는 함수일 경우, children 컴포넌트를 렌더링합니다. 반대로 _if가 거짓이거나 거짓을 반환하는 함수일 경우, _else 컴포넌트를 렌더링합니다.

Props

• _if: boolean | Function - 렌더링 여부를 결정하는 불리언 값 또는 함수.
• _else: JSX.Element | null - _if가 거짓일 때 렌더링할 컴포넌트.
• children: JSX.Element - _if가 참일 때 렌더링할 컴포넌트.

Example

as-is

function Mailbox({unreadMessages}) {
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 ? (
        <h2>You have {unreadMessages.length} unread messages.</h2>
      ) : (
        <ReadAllMessages />
      )}
    </div>
  );
}

to-be

function Mailbox({unreadMessages) {
  return (
    <div>
      <h1>Hello!</h1>
      <ShowChildren _if={unreadMessages.length > 0} _else={<ReadAllMessages />}>
        <h2>You have {unreadMessages.length} unread messages.</h2>
      </ShowChildren>
    </div>
  );
}

Code

import { ReactNode } from 'react';

interface Props<Condition extends boolean | Function> {
  _if: Condition;
  _else: JSX.Element | null;
  children: ReactNode;
}

export function ShowChildren<Condition extends boolean | Function>({
  _if,
  _else = null,
  children,
}: Props<Condition>) {
  if (typeof _if === 'function') {
    return _if() ? children : _else;
  }

  return _if ? children : _else;
}