저는 React 컴포넌트 모델의 진정한 힘을 완전히 이해하지 못한 채 몇 달 동안 React로 개발했습니다. 어느 날 저는 작곡에 뛰어들기로 결심했고, 이것이 제가 배운 것입니다.

React 구성 요소 및 하위 항목

React에서 컴포넌트는 자식을 하나, 많거나 갖지 않을 수 있습니다. 좋습니다. 그런데 잠깐만요. '어린이'란 무엇인가요? 예를 들어 설명해 보겠습니다.

Profile 구성 요소에는 두 개의 하위 항목이 있습니다: ProfileImage와 ProfileDetails. 이 두 개에는 하위 항목이 없습니다.

"여는 태그와 닫는 태그를 모두 포함하는 JSX 표현식에서 해당 태그 사이의 콘텐츠는 특별한 소품인 props.children으로 전달됩니다." — React 문서

기본적으로 props.children은 모든 구성 요소에 자동으로 전달되는 특수 소품으로, 구성 요소를 호출할 때 여는 태그와 닫는 태그 사이에 포함된 콘텐츠를 렌더링하는 데 사용할 수 있습니다. 이러한 종류의 구성 요소는 공식 문서에서 "상자"로 식별됩니다.

JSX 구문으로 구성요소 식별

React의 JSX에서 자식을 포함하는 컴포넌트는 항상 여는 태그와 닫는 태그로 식별됩니다. 위에서 본 것처럼 각 자식은 이 두 태그 사이에 배치되어야 합니다. 구성 요소에 하위 구성 요소가 없으면 또는 를 사용하여 호출할 수 있지만 일반적으로 후자 구문이 선호됩니다. 자체 닫는 태그의 목적은 코드를 더 짧고 읽기 쉽게 만드는 것입니다.

Action의 props.children

ImageSlider 구성 요소를 생성한다고 가정해 보겠습니다. 우리의 목표는 다음과 같이 구성 요소를 호출하는 것입니다.

보시다시피 ImageSlider는 props.children을 통해 액세스하고 렌더링할 수 있는 여러 로 구성됩니다.

export default function ImageSlider(props) { 
    return (
      

        {props.children}
      
    );  
}

props.children 덕분에 일반적인 HTML 요소를 중첩하는 것처럼 구성 요소 내에 콘텐츠를 중첩할 수 있습니다.

props.children에는 어떤 유형의 콘텐츠가 허용됩니까?

props.children을 통해 구성 요소에 전달된 콘텐츠에는 다음이 포함될 수 있습니다.

정의되지 않음, null, 부울, 숫자, 문자열, React 요소 또는 이러한 유형의 반복적인 배열입니다. 또한 이러한 유형 중 하나를 반환하는 함수일 수도 있습니다.

React 문서에 언급된 대로 false, null, 정의되지 않음 및 true는 유효한 하위 항목이지만 무시되고 렌더링되지 않습니다. false, true, null 또는 정의되지 않음을 렌더링하려면 먼저 문자열로 변환해야 합니다.

  { String(undefined) }

props.children이 왜 그렇게 중요한가요?

props.children을 사용하면 구성 요소를 구성할 수 있고 결과적으로 프런트 엔드 인터페이스도 구성할 수 있습니다. React 컴포넌트 모델의 진정한 힘을 활용합니다.

"React는 강력한 구성 모델을 가지고 있으며 구성 요소 간 코드를 재사용하려면 상속 대신 구성을 사용하는 것이 좋습니다." — React 문서

공식 문서에 설명된 대로 구성 요소의 여러 "구멍"을 채워야 하는 경우가 있습니다. 이러한 경우 props.children을 사용하는 대신 여러 사용자 정의 소품을 정의하는 것이 더 나은 접근 방식일 수 있습니다. 다음 예와 같이:

function SplitPane(props) {
  const { left, right } = props

  return (
    

      

        { left }      
      
      

        { right }      
      
    
  );
}

React.Children

"React.Children은 props.children 불투명 데이터 구조를 처리하기 위한 유틸리티를 제공합니다." — React 문서

props.children이 "불투명 데이터 구조"인 이유는 무엇입니까?

props.children은 하위 요소가 하나이거나 많거나 없음으로 구성될 수 있기 때문에 해당 값은 단일 하위 노드, 하위 노드의 배열 또는일 수 있습니다. 정의되지 않음 각각. React.Children API 덕분에 가능한 각 유형을 고려하지 않고도 props.children을 쉽게 처리할 수 있습니다. 다행히도 모든 것이 백그라운드에서 처리됩니다.

이 글을 쓰는 시점에서 React.Children은 다섯 가지 유틸리티를 제공합니다:

• 지도

• 각각

• 세다

• 오직

• 배열로

예제를 통해 React.Children을 어떻게 사용할 수 있는지 살펴보겠습니다. ImageSlider 구성 요소의 각 하위 요소에 특수 CSS 클래스 img-special-class를 추가한다고 가정해 보겠습니다. 이는 다음과 같이 수행할 수 있습니다:

export default function ImageSlider(props) {
  const { children } = props

  return (
    

      {
        React.Children.map(children, (child) =>
          React.cloneElement(child, {
              className: `${child.props.className} img-special-class`
            })
        )
      }
    
  );
}

React.Children.map을 사용하면 props.children을 반복하고 두 번째 매개변수로 전달된 함수에 따라 각 요소를 변환할 수 있습니다. 목표를 달성하기 위해 React.cloneElement를 사용했습니다. 이는 className prop의 값을 변경해야 했지만 props는 React에서 변경할 수 없기 때문에 각 하위 항목을 복제해야 했습니다.

결론

props.children을 마스터하는 것은 훌륭한 React 개발자가 되고 React 구성 요소 모델의 잠재력을 최대한 활용하기 시작하는 데 필수적입니다. props.children은 하위 구성 요소를 렌더링하는 기능을 제공하므로 React의 가장 유용한 기능 중 하나입니다. 이 때문에 모든 개발자는 올바르게 사용하는 방법을 알아야 합니다.

이 기사가 React에서 구성을 마스터하는 데 도움이 되기를 바랍니다.

"A Complete Guide To props.children In React"라는 게시물이 Writech에 처음 게재되었습니다.