React에서 큰 삼항 연산자 문 피하기

문제 소개

종종 React 애플리케이션을 작성할 때 일부 상태를 기반으로 일부 UI를 조건부로 렌더링하고 있습니다.
이 조건은 이진 부울 조건만큼 간단하거나 여러 개의 중첩된 문이 있는 더 복잡한 삼항 연산자일 수 있습니다.

react-query를 사용하여 API를 호출하고 API에 따라 다른 UI를 표시한다고 상상해 봅시다.
통화 상태.

const Example = () => {
  const { data, status } = useQuery('users', fetchUsers)

  return (
    <Page>
      {status === 'loading' ? (
        <LoadingView />
      ) : status === 'error' ? (
        <ErrorView />
      ) : (
        <SuccessView data={data} />
      )}
    </Page>
  )
}

이러한 종류의 조건은 때때로 읽기 어려울 수 있습니다.

복합 구성 요소 및 React.Children.map 기능을 활용하여 조건 논리를 래퍼 구성 요소로 이동하여 더 깨끗한 솔루션을 작성할 수 있습니다.

const Example = () => {
  const { data, status } = useQuery('users', fetchUsers)

  return (
    <Page.Wrapper status={status}>
      <Page.Loading>
        <LoadingView />
      </Page.Loading>
      <Page.Error>
        <ErrorView />
      </Page.Error>
      <Page.Success>
        <SuccessView data={data} />
      </Page.Success>
    </Page.Wrapper>
  )
}

페이지 구성 요소 구현

const PageWrapper = ({ children, status }) => {
  const renderChildren = useCallback(() => {
    return React.Children.map(children, (child) => {
      if (child?.type === Page.Loading && status === 'loading') {
        return child
      }
      if (child?.type === Page.Success && status === 'success') {
        return child
      }
      if (child?.type === Page.Error && status === 'error') {
        return child
      }
      return null
    })
  }, [children, status])

  return <>{renderChildren()}</>
}

export const Page = {
  Wrapper: PageWrapper,
  Loading: ({ children }) => children,
  Success: ({ children }) => children,
  Error: ({ children }) => children,
}

원래 게시 위치: https://www.danilothedev.com/blog/avoiding-large-ternary-statements-in-react