Props Drilling In React?

소품 드릴링이 뭐죠?

왜 피해야 할까요?

점을 찍는 방법?

소품 드릴링에 대해 알기 위해 위의 질문에 답할 것입니다.

소품 드릴링이란 무엇입니까?

구성 요소 트리 내에서 소품을 전달하는 것은 소품 드릴링으로 알려져 있습니다. 구성 요소 트리는 루트 구성 요소 App에서 하위 구성 요소 검색의 상위 구성 요소 헤더로 prop을 전달할 때를 의미합니다.

App(props) --> Header(props) --> Search(props)

위 예제의 코드는 루트 구성 요소에서 전달된 소품에 자리 표시자 텍스트가 설정되는 방법을 보여줍니다.

import React from 'react'

export default function App(){
   return(
       <div>
        <Header text="Search Movie..." />
       </div>
   )
}
function Header(props){
    return(
        <header>
            <Search text={props.text} />
        </header>
    )
}
function Search(props){
    return(
        <nav>
            <input 
                type='text'
                value=''
                placeholder={props.text}
            />
        </nav>
    )
}

keep drilling until you reach the bottom.

피해야 하는 이유?

답을 알기 전에 다음 그림을 보십시오.

모든 다음 인형은 이전 인형의 자식인 것처럼 보이며 가장 큰 인형(루트) 아래에 모든 인형을 숨길 수 있습니다.

마지막 인형이나 그 사이에 동전을 넣고 싶다면? 여기 캐치가 있습니다! 우리는 원하는 인형을 열 때까지 모든 인형을 열 것입니다.
따라서 마지막 구성 요소의 소품을 변경하기 위해 모든 부모 구성 요소를 통해 소품을 전달하고 다시 렌더링하는 구성 요소의 경우입니다. 꽤 비쌉니다. 그래서 우리는 이 소품 드릴링을 피해야 합니다.

피하는 방법?

흠, 피하는 방법? 논리가 말하는 것은 원하는 곳 어디에서나 액세스해야 하는 전역 값이 있어야 한다는 것입니다. 역시 그렇게 해결됩니다.

3가지가 필요합니다

컨텍스트 구성 요소

제공자

소비자

컨텍스트 API를 사용하여 컨텍스트를 제공하고 사용할 수 있습니다. 컨텍스트에 액세스하는 구성 요소는 다시 렌더링만 됩니다.
컨텍스트 구성 요소는 기본적으로 ReactReact.createContext() 함수의 내장 함수에 의해 생성되며 사용자가 제공하는 모든 값을 사용합니다.

컨텍스트 구성 요소 만들기

새 파일을 만든 다음 내보내고 가져옵니다.

const Context = React.createContext('default value')
export default Context 

제공

컨텍스트를 먼저 가져온 다음 원하는 구성 요소에 제공합니다. 헤더 구성 요소에 제공한다고 가정합니다.

//import Context
<Context.Provider value='Search Movie...'>
   <Header />
</Context.Provider>

태워 버리는

컨텍스트는 React.Consumer 또는 useContext() 후크를 통해 양방향으로 소비자가 될 수 있습니다.
둘 다 보자

컨텍스트.소비자

//import Context first, if it's a separate file.
<Context.Consumer>
{context => <input type='text' value='' placeholder={context} /> }
</Context.Consumer>

useContext() 후크

{useContext}를 가져오거나 React.useContext로 사용해야 합니다. Context를 인수로 사용하고 값을 반환합니다.

<input type='text' value='' placeholder={useContext(Context)} />

완전한 코드

함수형 컴포넌트 코드이므로 hook을 사용했습니다.

import React, {useContext} from 'react'

const Context = React.createContext('default value')
export default function App(){
   return(
       <Context.Provider value='Seach Movie...'>
            <Header />
       </Context.Provider>
   )
}
function Header(props){
    return(
        <header>
            <Search />
        </header>
    )
}
function Search(props){
    return(
        <nav>
            <Context.Consumer>
                {context => (
                        <input 
                            type='text'
                            value=''
                            placeholder={context}
                        />
                    )
                }
            </Context.Consumer>
        </nav>
     )
}

Context API is the most common solution, but not the only.

도움이 되었거나 빠진 것이 있으면 알려주세요.

Join me on twitter I keep sharing tips and resources about javascript, and react.