React의 Props 드릴링 토크

React에서 Props 드릴링을 해결하는 두 가지 일반적인 방법이 있습니다. ContextAPI/Redux를 사용하고 React Composition을 사용합니다.

React에서 Prop 드릴링을 해결할 때 Context의 단점: 재사용성
예를 들어 User 구성 요소가 깊이 중첩되어 있고 다른 Provider에서 사용하려고 합니다.

    App
     |-- Homepage
           |-- User.Provider
                   |-- ... WhateverComponents
                         |---- ProfileComponent => use userData from provider here

다른 컨테이너에서 userData를 사용하려면 어떻게 해야 합니까?

App
  |-- Homepage
  |        |-- User.Provider
  |            |-- ... WhateverComponents
  |                  | ...
  |
  |-- Cart (what if we want to use userData in here?) userData will be empty here!

컨텍스트는 하나의 중첩 제공자 아래에 있는 다양한 구성 요소에 소품을 전달하는 데 적합합니다.

                                    App
                                     |
                                     |
                                  Homepage
                                     |
                                     |
                                User.Provider
                                     |
                                     |
                                _____________
                                |           |
                                |           |
                            Component1   Component2
                                |            |
                                |            |------------------------|
                            Component3       |                   Component5
                           (use userData)    |                        | 
                                             |                        |
                                          Component4              Component6
                                                                 (use userData)

Props Drilling을 해결하는 방법이 있습니다. 바로 Component Compose입니다.
위의 구조를 다음과 같은 코드로 다시 작성할 수 있습니다.

// app.tsx
const App = () => {
    const userData = {...}
    return (
        <Homepage>
            <Component1>
                <Component3 data={userData} />
            </Component1>

            <Component2>
                <Component4 />
                <Component5>
                    <Component6 data={userData} />
                </Component5>
            </Component2>
        </Homepage>
    )
}

userData는 상위 구성 요소를 거치지 않고 컨테이너에서 바로 전달됩니다. 이것은 또한 성능을 향상시킬 수 있으므로 userData가 변경되면 이를 사용하는 구성 요소만 다시 렌더링됩니다.

React Composition의 단점: 컨테이너가 점점 더 커지면 중첩된 구성 요소 레이어가 너무 깊어질 수 있습니다. 이 문제에 대해 우리는 그것들을 더 작은 구성 요소로 나누고 각 컨테이너가 필요로 하고 유지해야 하는 소품을 현명하게 결정해야 합니다.

참조:
https://felixgerschau.com/react-component-composition/
https://reactjs.org/docs/context.html#when-to-use-context
https://kentcdodds.com/blog/prop-drilling
https://frontendmastery.com/posts/advanced-react-component-composition-guide/