Portfolio

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


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>
  );
}

`console.log(children)`


[
	Object1, // banana
	[
		Object2, // apple
		Object3, // kiwi
  ]
]

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


[
  Object1, // banana
  Object2, // apple
  Object3, // kiwi
];

예제2


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>);
}

예제3


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 />;
}

두 번째 기능

1차원 배열로 변환하는 과정에서 재조정(Reconciliation)과 렌더링 최적화를 위해

고유한 key 값을 부여한다.

console.log(children)의 child


{
  $$typeof: Symbol(react.element),
  key: null,  
	props: {
    name: "banana",
    children: "banana"
  },
  ...
}

console.log(Children.toArray(children))의 child


{
  $$typeof: Symbol(react.element),
  key: ".0",  
	props: {
    name: "banana",
    children: "banana"
  },
  ...
}

React.Children.toArray()는 children을 평평하게(Flatten) 만들 때, 중첩된 배열들의 의미를 보존하기 위하여 key를 변경합니다. 즉, toArray는 반환되는 배열에 key 값을 덧붙여서 각 엘리먼트가 갖는 key가 평평해진 배열 내에서만 유효한 범위를 형성하도록 해줍니다.

주의

React.Children.toArray는 <React.Fragment>의 내부를 평탄화하지 않는다.

react-keyed-flatten-children을 사용할 수 있다.


import flattenChildren from "react-keyed-flatten-children";

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