React 렌더 소품

Pet React 프로젝트를 빌드할 때 때때로 DRY principle을 따르기 위해 다른 구성 요소에서 구성 요소를 재사용할 수 있습니다. 여기서 render props pattern이 빛날 수 있습니다.


React documentation에 따르면 렌더링 소품은 "값이 함수인 소품을 사용하여 React 구성 요소 간에 코드를 공유하는 기술"입니다.

예를 들어 이 정의를 분석해 보겠습니다. 제공된 난수에 따라 두 개의 멋진 댓글을 표시하는 간단한 React 애플리케이션이 있습니다. 난수가 0보다 크면 "Whoa, Big Guy!"를 표시합니다. 난수가 0보다 작거나 같으면 "Nah, less than one, Nice Try!"를 표시합니다.

function App() {
    return (
        <div>
            <RandomNumber render={
                function(number) {
                    return (
                        <h1>{number > 0 ? "Whoa, Big Guy!" : "Nah, less than one, Nice Try!"}</h1>
                    )
                }
            }/>
        </div>
    )
}


function RandomNumber(props) { 
    const max = Math.random()
    const min = Math.random()
    const number = max - min
    return (
        <div>
            {props.render(number)}
        </div>
    )
}

ReactDOM.render(<App />,document.getElementById('root'))

함께 연주하고 싶다면 codepen 의 코드에 액세스할 수 있습니다.

여기에서 하위 구성 요소<App />를 포함하는 하나의 구성 요소<RandomNumber />가 있음을 알 수 있습니다.

하위 구성 요소<RandomNumber />는 난수의 상태를 관리하지만 <App />가 자신의 표시를 렌더링하는지 아니면 다른 상위 구성 요소를 렌더링하는지 상관하지 않습니다.

상위 구성 요소<App />는 난수 및 해당 메시지의 표시를 관리합니다. 그러나 난수의 상태를 유지하지는 않습니다.

이제 세 개의 상위 구성 요소에서 <RandomNumber /> 구성 요소를 공유해야 한다면 어떻게 될까요? 아래에서 어떻게 보이는지 봅시다.

function App() {
    return (
      <>
        <ParentOne />
        <ParentTwo />
        <ParentThree />
      </>
    )
}

function ParentOne() {
    return (
        <div>
            <RandomNumber render={
                function(number) {
                    return (
                        <h1>{number > 0 ? "Whoa, Big Guy!" : "Nah, less than one, Nice Try!"}</h1>
                    )
                }
            }/>
        </div>
    )
}

function ParentTwo() {
    return (
        <div>
            <RandomNumber render={
                function(number) {
                    return (
                        <h1>{number > 0 ? "Whoa, Big Guy!" : "Nah, less than one, Nice Try!"}</h1>
                    )
                }
            }/>
        </div>
    )
}

function ParentThree() {
    return (
        <div>
            <RandomNumber render={
                function(number) {
                    return (
                        <h1>{number > 0 ? "Whoa, Big Guy!" : "Nah, less than one, Nice Try!"}</h1>
                    )
                }
            }/>
        </div>
    )
}

function RandomNumber(props) { 
    const max = Math.random()
    const min = Math.random()
    const number = max - min
    return (
        <div>
            {props.render(number)}
        </div>
    )
}

ReactDOM.render(<App />,document.getElementById('root'))

함께 연주하고 싶다면 codepen 의 코드에 액세스할 수 있습니다.

기본적으로 위의 첫 번째 코드와 동일한 코드입니다. 그러나 이제 우리에게는 세 명의 부모가 있습니다. 알림<RandomNumber /> 하위 구성 요소는 각 상위를 수용하기 위해 변경할 필요가 없습니다. 단순히 각 부모 구성 요소에 대해 난수를 유지합니다. 차례로 각 부모 구성 요소는 JSX의 렌더링을 개별적으로 서로 독립적으로 관리합니다.


경고: 이것은 React 학습에 대한 제 개인적인 메모입니다. 틀린 부분이 있다면 지적해주시면 감사하겠습니다. 고맙습니다!

작성일: 2021년 12월 16일