React에서 자식에게 소품 전달하기

1. React에서 자식에게 소품 전달하기
2. Context API를 사용하여 React에서 자식에게 소품 전달하기
3. React.cloneElement()를 사용하여 React에서 자식에게 소품 전달

React 개발자는 강력하면서도 유지 관리 가능한 애플리케이션을 빌드하기 위해 구성 요소 재사용성에 의존합니다.

반응 라이브러리에는 재사용 가능한 구성 요소를 유연하게 활용할 수 있는 구성 모델이 있습니다. 어떤 상황에서는 구성 요소의 자식이 무엇인지 예측할 수 없습니다.

예를 들어, 메시징 앱을 구축할 때 대화 상자에는 텍스트뿐만 아니라 이모티콘도 포함될 수 있습니다.

React는 구성 요소의 재사용성을 높이기 위해 props.children 기능을 제공합니다. 간단히 말해서 React 개발자는 this.props.children을 사용하여 상위 구성요소의 여는 태그와 닫는 태그 사이에 배치된 값(일반적으로 UI 요소)을 표시할 수 있습니다.

React에서 자식에게 소품 전달하기

props.children을 통해 받는 자식 요소가 있다고 가정해 보겠습니다. 이를 표시하려면 return 문에 props.children 또는 this.props.children(클래스 구성 요소의 경우)을 포함해야 합니다.

다음은 세 가지 구성 요소가 있는 예입니다. 상위 구성 요소 App와 하위 Text 구성 요소가 있는 Box 구성 요소입니다. 한 번 보자:

class App extends Component {
  render() {
    return <Box>
            <Text></Text>
           </Box>;
  }
}

class Box extends Component {
  render() {
    return <div>{this.props.children}</div>;
  }
}
class Text extends Component {
  render() {
    return <p>Welcome to App</p>;
  }
}

그러나 props.children에 포함된 요소 또는 구성 요소에 추가 props를 전달해야 하는 경우 어떻게 해야 합니까? 이 예에서는 텍스트에 color 또는 fontSize 속성을 지정해야 할 수도 있습니다.

이를 위한 두 가지 훌륭한 옵션을 살펴보겠습니다.

Context API를 사용하여 React에서 자식에게 소품 전달하기

Context를 사용하면 구성 요소의 전체 트리에 소품을 전달할 수 있습니다. 상단에 App 구성 요소가 있지만 트리 하단에 있는 자식 구성 요소에 이벤트 핸들러를 전달하려고 하기 때문에 매우 유용합니다.

수동으로 전달할 수 있지만 시간이 많이 걸리고 추적하기 어렵습니다. 대신 Context를 사용하여 모든 하위 구성 요소에서 값을 사용할 수 있도록 할 수 있습니다.

기술적으로 Context는 props와 동일하지 않지만 우리 상황에서 작업을 완료합니다. 이를 위해 모든 React 애플리케이션에서 사용할 수 있는 React.createContext() 메서드를 사용할 것입니다.

먼저 Context 인스턴스를 저장할 변수를 정의합니다.

import React, { Component } from 'react';
import { render } from 'react-dom';
const SampleContext = React.createContext()
class App extends Component {
  render() {
    return <Box>
            <Text></Text>
           </Box>;
  }
}

변수는 클래스 구성 요소의 범위 외부에서 생성됩니다.

this.props.children을 표시하는 구성 요소를 찾아 <SampleContext.Provider>로 래핑합니다. 래퍼의 여는 태그와 닫는 태그 사이에 있는 모든 것은 우리가 정의한 값에 액세스할 수 있습니다.

그런 다음 값을 지정합니다.

class Box extends Component {
  render() {
    return <SampleContext.Provider value={{color: "red"}}>
          {this.props.children}
          </SampleContext.Provider>;
  }
}

이제 this.props.children과 같이 전달되는 구성 요소로 이동하여 contextType 속성을 처음 생성한 변수와 동일하게 설정합니다.

class Text extends Component {
  static contextType = SampleContext
  render() {
    return <p style={{color: this.context.color}}>Welcome to App</p>;
  }
}

그렇게 하면 Context에서 값에 액세스할 수 있습니다. 이 경우 인라인 스타일 개체를 정의하고 color 속성을 this.context.color, 빨간색으로 설정합니다.

텍스트는 재생 코드에서 볼 수 있듯이 실제로 ‘빨간색’입니다. Context에서 속성을 추가하거나 제거하고 작동하는지 확인하여 코드를 직접 편집할 수 있습니다.

React.cloneElement()를 사용하여 React에서 자식에게 소품 전달

또는 cloneElement() 메서드를 사용하여 props.children의 요소 또는 구성 요소에 사용자 지정 소품을 추가할 수도 있습니다. 예를 보고 요약해 보겠습니다.

<>{React.cloneElement(props.children, {color: "red"})}</>

이 예에서 메서드는 두 개의 인수를 사용합니다. 먼저 복제를 위한 시작점으로 사용할 props.children을 전달해야 합니다. 이것은 복제된 요소가 원본의 모든 props를 갖게 된다는 것을 의미합니다.

cloneElement() 메서드는 DOM과 상호 작용할 때 중요한 참조도 보존합니다.

두 번째 인수로 구성 요소가 받기를 원하는 모든 추가 props를 전달해야 합니다. 이 경우 "red" 값을 가진 color 소품을 전달합니다.