HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🚀
개발 노트/
👖
React.Children 유틸리티
👖

React.Children 유틸리티

children의 요소들을 각각 다르게 노출한다거나 sort, filter, slice 같은 조작을 할 때 필요하다.
 

1. React.Children.toArray()

공식문서

Returns the children opaque data structure as a flat array with keys assigned to each child.
 

첫 번째 기능

children을 1차원 배열(flat array)로 변환해서 리턴한다. (평탄화)
children이 배열이 아닌 opaque data structure일 때도 동작한다.
※ 구체적인 데이터 구조가 인터페이스에 정의되지 않은 데이터 유형 (undefined 등)
 

예제1

console.log(children)

console.log(React.Children.toArray(children))

 

예제2

 

예제3

 

두 번째 기능

1차원 배열로 변환하는 과정에서 재조정(Reconciliation)과 렌더링 최적화를 위해
고유한 key 값을 부여한다.
 
console.log(children)의 child
console.log(Children.toArray(children))의 child
 
React.Children.toArray()는 children을 평평하게(Flatten) 만들 때, 중첩된 배열들의 의미를 보존하기 위하여 key를 변경합니다. 즉, toArray는 반환되는 배열에 key 값을 덧붙여서 각 엘리먼트가 갖는 key가 평평해진 배열 내에서만 유효한 범위를 형성하도록 해줍니다.
 

주의

React.Children.toArray는 <React.Fragment>의 내부를 평탄화하지 않는다.
react-keyed-flatten-children을 사용할 수 있다.
 

2. React.Children.count()

 
 
children에 포함된 컴포넌트의 개수를 반환한다.
 

3. React.Children.only()

 
children이 단 하나의 자식(React 엘리먼트)를 갖는지 확인하고 해당 자식 엘리먼트를 반환한다.
그렇지 않을 경우 오류를 발생시킨다.
 
 

참고 자료

React Children 과 친해지기
카카오엔터테인먼트 FE 기술블로그
React Children 과 친해지기
https://fe-developers.kakaoent.com/2021/211022-react-children-tip/
React Children 과 친해지기
 
function Box({ children }) {
  console.log(children);
  console.log(React.Children.toArray(children));
  return children;
}

const fruits = [
  { id: 1, name: "apple" },
  { id: 2, name: "kiwi" },
];

export default function App() {
  return (
    <Box>
      <div name="banana">banana</div>
      {fruits.map(fruit => (
        <div key={`${fruit.id}_${fruit.name}`} name={fruit.name}>
          {fruit.name}
        </div>
      ))}
    </Box>
  );
}
[
	Object1, // banana
	[
		Object2, // apple
		Object3, // kiwi
  ]
]
[
  Object1, // banana
  Object2, // apple
  Object3, // kiwi
];
function Box({ children }) {
  console.log(children); // object
  console.log(React.Children.toArray(children)); // array
  /**
   * children이 object이므로 slice 같은 배열 함수를 사용할 수 없습니다.
   * children.slice(0,2); // children.slice is not a function
   */
  return React.Children.toArray(children).slice(0, 2);
}

export default function App() {
  return (
    <Box>
      <div name="banana">banana</div>
    </Box>);
}
function Box({ children }) {
  console.log(children); // undefined
  console.log(React.Children.toArray(children)); // array (빈 배열)
  /**
   * children이 undefined이므로 마찬가지로 배열 함수를 사용할 수 없습니다.
   * children.slice(0,2); // Cannot read property 'slice' of undefined
   */
  return React.Children.toArray(children).slice(0, 2);
}

export default function App() {
  return <Box />;
}
{
  $$typeof: Symbol(react.element),
  key: null,  
	props: {
    name: "banana",
    children: "banana"
  },
  ...
}
{
  $$typeof: Symbol(react.element),
  key: ".0",  
	props: {
    name: "banana",
    children: "banana"
  },
  ...
}
import flattenChildren from "react-keyed-flatten-children";

function Box({ children }) {
  console.log(flattenChildren(children));
  return children;
}
...
React.Children.count(children)