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를 사용해주어야 합니다.
반응형
'공유 > React, Next' 카테고리의 다른 글
[React] 컴포넌트에 데이터 숨기는 방법 (0) | 2024.06.24 |
---|---|
[React] React 컴포넌트에서 Generic 사용하기 (0) | 2024.03.19 |