일반적인 사용 사례로 React.Children API 이해하기

우리 모두는 자식 요소를 얻기 위해 React 구성 요소 내부에서 {this.props.children}을 사용했을 수 있습니다.
{this.props.children}은 불투명한 데이터 구조라고 할 수 있습니다. 이에 대해 수행할 수 있는 작업이나 조작은 매우 제한적입니다. 여기에서 React.Children API가 등장합니다.

React는 이 불투명한 데이터 구조를 처리하는 데 도움이 되는 Children API를 제공합니다.

예를 사용하여 사용 사례를 살펴보겠습니다.

ParentElement.js

import { Component } from "react";

class ParentElement extends Component {
  render() {
    // Inside the Parent component we are directly displaying the props.children
    return <div>{this.props.children}</div>;
  }
}

export default ParentElement;

ChildElement.js

import { Component } from "react";
import Parent from "./ParentElement";

// This is a simple example for using the Parent component
// And accessing the child elements wrapped inside the Parent
class ChildElement extends Component {
  render() {
    return (
      <Parent>
        <div>Child 1</div>
        <div>Child 2</div>
        <div>Child 3</div>
        <div>Child 4</div>
      </Parent>
    );
  }
}

export default ChildElement;

다음 코드로 출력



이제 발생할 수 있는 시나리오를 살펴보겠습니다.

1. React.Children.toArray()

시나리오 1 - {this.props.children}에서 직계 자식 요소로 4개의 div를 가져오더라도 ParentElement 내부의 첫 번째 자식만 표시해야 합니다.

{this.props.children}에서 얻은 데이터를 불투명 데이터라고 합니다. 이것은 단일 엔터티로 취급되며 배열 형태로 배포할 수 없습니다. 이를 배열로 변환하기 위해 React.Children api에서 toArray 메서드를 사용할 수 있습니다.

이 메서드는 this.props.children을 인수로 받아 배열의 요소를 형성하는 각 직계 자식이 있는 배열로 변환합니다.

이 구현을 살펴보고 시나리오 1에서 언급한 문제를 해결해 보겠습니다.

ParentElement.js

import React, { Component } from "react";

class ParentElement extends Component {
  render() {
    const { children } = this.props;
    // toArray method is called to convert this.props.children to an array
    // We are then referencing the first element using index 0
    return <div>{React.Children.toArray(children)[0]}</div>;
  }
}

export default ParentElement;

toArray 메서드 구현 후 출력

2. React.Children.count()

시나리오 2 - 직속 자식 요소의 수를 가져와야 합니다.

다시 말하지만 이것은 단일 엔터티로 간주되므로 this.props.children에서 계산하는 것이 불가능합니다.

React.Children은 이를 위한 count 메소드를 제공합니다.

이 .props.children을 인수로 취하고 직계 자식 요소의 수를 반환합니다.

ParentElement.js

import React, { Component } from "react";

class ParentElement extends Component {
  render() {
    const { children } = this.props;
    // count method is used to count the immediate child elements in this.props.children
    // Even though the count is 4, we are only displaying Child 1
    return (
      <div>
        <p>
          Total Count of Children: {React.Children.count(this.props.children)}
        </p>
        {React.Children.toArray(children)[0]}
      </div>
    );
  }
}

export default ParentElement;

3. React.Children.only()

시나리오 - 3 - this.props.children이 직계 자식으로 1개의 요소만 갖도록 해야 합니다. 이 하나의 요소는 내부에 여러 하위 요소를 가질 수 있습니다. 그러나 가장 높은 수준에서는 요소가 하나만 있는지 확인해야 합니다.

이를 위해 React.Children api의 유일한 방법을 사용할 수 있습니다.

아래 코드를 살펴보겠습니다.

ChildElement.js

import { Component } from "react";
import Parent from "./ParentElement";

// This is a simple example for using the Parent component
// And accessing the child elements wrapped inside the Parent
class ChildElement extends Component {
  render() {
    return (
    // There are 4 immediate child elements here
      <Parent>
        <div>Child 1</div>
        <div>Child 2</div>
        <div>Child 3</div>
        <div>Child 4</div>
      </Parent>
    );
  }
}

export default ChildElement;

ParentElement.js

import React, { Component } from "react";

class ParentElement extends Component {
  render() {
    const { children } = this.props;
    // count method is used to count the immediate child elements in this.props.children
    // Even though the count is 4, we are only displaying Child 1
    return (
      <div>
        <p>
          Total Count of Children: {React.Children.count(this.props.children)}
        </p>
        {/* Making use of the only method */}
        {React.Children.only(children)}
      </div>
    );
  }
}

export default ParentElement;

자식 요소가 4개일 때 출력



이제 유일한 방법을 준수하기 위해 단일 div에 4개의 하위 요소를 래핑합니다.

ChildElement.js

import { Component } from "react";
import Parent from "./ParentElement";

// This is a simple example for using the Parent component
// And accessing the child elements wrapped inside the Parent
class ChildElement extends Component {
  render() {
    return (
      // There are 4 immediate child elements here
      <Parent>
        {/* Wrapping the child elements inside a single element */}
        <div>
          <div>Child 1</div>
          <div>Child 2</div>
          <div>Child 3</div>
          <div>Child 4</div>
        </div>
      </Parent>
    );
  }
}

export default ChildElement;

이제 출력이 -로 변경됩니다.



이제 html 구조를 변경하고 4개의 하위 요소에 상위 div를 추가하여 React.Children.only 메소드를 사용할 때 직계 하위 요소가 하나만 있는지 확인하므로 현재 작동하고 있습니다.

4. React.Children.map()

시나리오 4 - 모든 개별 하위 항목을 반복한 다음 이를 특정 스타일의 버튼 요소로 변환해야 합니다.

이것은 다시 this.props.children을 통해 직접 가능하지 않습니다.

배열 맵 방법과 매우 유사하게 작동하는 React.Children에서 제공하는 맵 방법이 있습니다. 출력으로 항목 배열을 반환합니다.

아래 코드를 살펴보겠습니다.

ChildElement.js

import { Component } from "react";
import Parent from "./ParentElement";

// This is a simple example for using the Parent component
// And accessing the child elements wrapped inside the Parent
class ChildElement extends Component {
  render() {
    return (
      // There are 4 immediate child elements here
      <Parent>
        {/* Wrapping the child elements inside a single element */}
        <div>
          <div>Child 1</div>
          <div>Child 2</div>
          <div>Child 3</div>
          <div>Child 4</div>
        </div>
      </Parent>
    );
  }
}

export default ChildElement;

ParentElement.js

import React, { Component } from "react";

const btnStyle = {
  background: "green",
  color: "#fff",
  fontSize: "18px",
  fontWeight: "bold",
  border: "1px solid white",
  marginTop: "5px",
  padding: "3px",
};

class ParentElement extends Component {
  render() {
    const { children } = this.props;
    // count method is used to count the immediate child elements in this.props.children
    // Even though the count is 4, we are only displaying Child 1
    return (
      <div>
        <p>
          Total Count of Children: {React.Children.count(this.props.children)}
        </p>
        {/* Making use of the only method */}
        {React.Children.map(children, (child) => {
          return <button style={btnStyle}>{child}</button>;
        })}
      </div>
    );
  }
}

export default ParentElement;

위 코드의 출력



이제 이 출력을 확인하면 4개의 하위 요소가 모두 단일 버튼 안에 래핑되어 있음을 알 수 있습니다. 이는 ChildElement.js에서 단일 부모 div 아래에 4개의 자식 요소 div를 모두 래핑했기 때문입니다. map 메서드는 직계 자식을 통해서만 반복됩니다.

이제 ChildElement.js의 html 구조를 변경하고 상위 div를 제거하겠습니다.

import { Component } from "react";
import Parent from "./ParentElement";

// This is a simple example for using the Parent component
// And accessing the child elements wrapped inside the Parent
class ChildElement extends Component {
  render() {
    return (
      // There are 4 immediate child elements here
      <Parent>
        {/* Removed the parent div from here */}
        <div>Child 1</div>
        <div>Child 2</div>
        <div>Child 3</div>
        <div>Child 4</div>
      </Parent>
    );
  }
}

export default ChildElement;

위 코드의 출력 -



이미지에서 볼 수 있듯이 이제 스타일이 적용된 4개의 개별 버튼이 표시됩니다.

5. React.Children.forEach()

이 방법은 지도 방법과도 매우 유사합니다. 유일한 차이점은 배열을 반환하지 않는다는 것입니다. 단순히 사용자가 모든 직계 자식 요소를 반복할 수 있도록 합니다.

// This is used to print the values inside the individual child elements 
    React.Children.forEach(children, (child) => {
      console.log(child.props.children);
    });

산출



이것이 React의 Children API와 우리가 사용할 수 있는 일반적인 방법 및 사용 사례에 대한 공정한 이해를 제공하는 데 도움이 되었기를 바랍니다.

행복한 코딩!