React의 props.children에 대한 완전한 가이드

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

React 구성 요소 및 하위 요소

React에서 구성 요소에는 하위 항목이 하나이거나 많을 수도 있고 없을 수도 있습니다. 좋습니다. 그런데 잠깐만요. '어린이'란 무엇인가요? 예를 들어 설명해 보겠습니다.

<Profile>
  <ProfileImage src="/asset/profile-img.png" />
  <ProfileDetails name="Antonello" surname="Zanini" />
</Profile>

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

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

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

JSX 구문으로 구성요소 식별

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

Action의 props.children

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

<ImageSlider>
  <img src="/assets/img-1.pg" />
  <img src="/assets/img-2.pg" />
  <img src="/assets/img-3.pg" />
</ImageSlider>

보시다시피 ImageSlider는 여러 개의 props.children을 통해 액세스하고 렌더링할 수 있습니다.

export default function ImageSlider(props) { 
    return (
      <div className="img-slider">
        {props.children}
      </div>
    );  
}

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

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

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

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

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

<MyComponent>
  { String(undefined) }
</MyComponent>

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

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

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

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

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

  return (
    <div className="split-pane">
      <div className="left-pane">
        { left }      
      </div>
      <div className="right-pane">
        { right }      
      </div>
    </div>
  );
}

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 (
    <div className="img-slider">
      {
        React.Children.map(children, (child) =>
          React.cloneElement(child, {
              className: `${child.props.className} img-special-class`
            })
        )
      }
    </div>
  );
}

React.Children.map allows us to iterate over props.children and transform each element according to the function passed as the second parameter. To achieve our goal, we used React.cloneElement. This is because we needed to change the value of the className prop, but props are immutable in React, so we had to clone each child.

Conclusion

Mastering props.children is essential to becoming a great React developer and beginning to harness the full potential of the React component model. props.children is one of React's most useful features, since it gives us the ability to render child components. Because of this, every developer should know how to use it properly.

I hope this article helps you master composition in React.

---

The post "A Complete Guide To props.children In React" appeared first on Writech.

위 내용은 React의 props.children에 대한 완전한 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!