React Children API

https://www.daleseo.com/react-children/

React의 Children API 사용법

---

 

컴포넌트의 Props로 넘어온 children props와 Children API를 다뤄보자.

children props 
컴포넌트 함수의 props에 넘어온 컴포넌트 자식이 넘어온다.
Children API
children props를 효과적으로 다룰 수 있도록 제공하는 API

 

children props

children props는 아래처럼 다양한 경우로 넘어올 수 있다.

// HTML 요소나 React 요소, 문자열이 넘어올 수도 있다.
<OurComponent>Text</OurComponent>
<OurComponent>{100}</OurComponent>

<OurComponent>
  <input />
</OurComponent>
<OurComponent>
  <Button />
</OurComponent>

// 함수가 넘어올 수도 있다. (보통 function as children 또는 render prop)

<OurComponent>{(data) => <span>{data}</span>}</OurComponent>

// 아니면 아무 것도 넘어오지 않을 수도 있습니다. (null)
<OurComponent />

 

Children API

`react package` 로부터 `React`를 불러온 후, React.Children 에 접근하거나,

`react package` 로부터 `Children` 을 named import 로 바로 불러와서 사용한다.

 

// 1
import React from "react";

function ReactChildren({ children }) {
  console.log(React.Children);
  return <>ReactChildren</>;
}

// 2
import { Children } from "react";

function ReactChildren({ children }) {
  console.log(Children);
  return <>ReactChildren</>;
}

 

`Children` 은 `map()` , `forEach()`, `count()`, `toArray()`, `only()` 를 제공합니다.

 

map()

function Map({ children }) {
  return React.Children.map(children, (child, i) =>
    i % 2 === 0 ? <b>{child}</b> : <u>{child}</u>
  );
}

 

forEach

자식을 순회하고 싶을 때

function ForEach({ children }) {
  let count = 0;
  React.Children.forEach(children, (child) => {
    count += child.length;
  });
  return (
    <>
      {children}
      {`(총 글자수: ${count})`}
    </>
  );
}

 

count

자식 컴포넌트의 개수를 반환

function Count({ children }) {
  const count = React.Children.count(children);
  return (
    <>
      {children}
      {`(총 자식수: ${count})`}
    </>
  );
}

 

toArray

자식을 일반 자바스크립트 배열로 반환. 자식을 상대로 배열에서 제공하는 함수를 사용하고 싶을 때 사용.

function ToArray({ children }) {
  const array = React.Children.toArray(children);
  return array.filter((child, i) => i % 2 === 0);
}

 

only

컴포넌트에 자식이 하나만 넘어왔는 지 검증하고 싶을 때.

function Only({ children }) {
  return React.Children.only(children);
}