React "if 구성 요소"

Vue와 Angular.js(저는 Angular의 첫 번째 버전이 나왔을 때 사용했습니다)를 수년 동안 사용한 후, 조건부로 자식 구성 요소를 렌더링하기 위해 v-if 및 ng-if를 사용하는 단순함을 항상 즐겼습니다.

이제 저는 기본적으로 React를 작성하고 있습니다. 솔직히 조건부로 렌더링된 구성 요소를 처리할 때 삼항 연산자를 계속 사용하는 것이 귀찮습니다.

function SomeComponent({condition}) {
  return <div>
    { condition ? <span>Yes it is true!</span> : null }
  </div>
}

그것은 큰 문제가 아니며 부울 종속 구성 요소를 렌더링하는 다양한 방법이 있지만 위와 같은 코드를 반복적으로 작성하고 있습니다.

오늘 나는 7 Ways of Achieving Conditional Rendering in React 을 읽었고, 여기에는 지금부터 채택할 편리한 스니펫이 포함되어 있습니다.

조건부 if 구성 요소

삼항 연산자를 추상화하는 것을 고려하지 않았다고 말할 수는 없지만 어떻게든 실제로는 적용하지 않았습니다. Fernando Doglio의 기사는 이제 더 멋진 패턴을 채택하기 위해 선을 넘었습니다. 기능적if 구성 요소에 인사를 드립니다.

function IF({children, condition}) {
  if (condition) {
    // render children if the condition is truthy
    return children;
  }

  return null;
}

/**
 * Use the component as follows:
 *
 * <IF condition={condition}>
 *   <Greeter username={user.name} />
 * </IF>
 */

7줄의 코드이며 이 작은 구성 요소는 모든 React 프로젝트에 편리한 유틸리티로 가져올 수 있습니다. 훨씬 낫다! 페르난도 감사합니다!