[React] children 개수 확인하는 방법

React에서 ui 컴포넌트를 구현할 때 children의 개수가 필요한 경우가 있습니다.
예를들어 Tree 컴포넌트를 구현한다고 해봅시다.

<TreeItem label="1번">1번</TreeItem>
<TreeItem label="2번">
  <TreeItem>2-1번</TreeItem>
  <TreeItem>2-2번</TreeItem>
</TreeItem>

위 코드를 실행하였을 때 원하는 결과는 아래와 같습니다.

1번
2번
ㄴ 2-1번
ㄴ 2-2번

즉 자식이 React children인 경우는 폴더로 구현해야합니다.
자식이 React children이 아닌 경우는 파일로 구현해야합니다.

위 코드에서 children 개수를 확인하는 간단한 방법은 React.Children.count 함수를 사용하는 것입니다.
해당 함수를 사용하면 간단하게 자식 개수를 파악할 수 있습니다.

그러나 위 같은 경우 1번도 자식이기 때문에 결과 값이 1이 나오게 됩니다.
이때는 추가적으로 React Element인지 확인하는 함수 React.isValidElement를 사용해주어야 합니다.