Prop Drilling이란 무엇일까?
Prop drilling은 React 애플리케이션에서 데이터를 전달하기 위해 필요한 과정을 설명하는 용어입니다.
이는 컴포넌트 트리에서 데이터를 하위 컴포넌트로 전달하기 위해 중간 컴포넌트를 통해 프로퍼티를 내려주는 것을 의미합니다.
이러한 중간 컴포넌트는 원하는 자식 컴포넌트에게 프로퍼티를 전달하기 위해 필요하지만 해당 값을 직접 사용하지 않는 경우에도 프로퍼티를 받고 전달해야 합니다.
Prop drilling의 장단점은 다음과 같습니다:
장점
- 명시적인 값의 사용:
Prop drilling을 통해 값을 전달하는 방식은 어디서 데이터가 사용되는지 명확하게 보여줍니다. 각 컴포넌트에서 어떤 프로퍼티를 받아 사용하는지를 확인할 수 있어 코드의 의도를 더 명확하게 파악할 수 있습니다. - 값 추적 용이성:
Prop drilling을 사용하면 값의 흐름을 쉽게 추적할 수 있습니다. 값이 어떤 컴포넌트를 거쳐 전달되는지를 알 수 있으므로 버그를 디버깅하거나 코드를 변경할 때 더욱 편리합니다. - 코드 변경 파악 용이성:
Prop drilling을 통해 데이터가 전달되는 경로를 알 수 있기 때문에 코드 변경이 애플리케이션의 다른 부분에 어떤 영향을 주는지 파악하는 것이 용이합니다. 데이터의 흐름을 명확하게 파악할 수 있으므로 변경 사항에 따른 영향을 사전에 예측하고 관리할 수 있습니다.
단점
- 프로퍼티 데이터 형식 변경의 불편함:
Prop drilling 데이터의 데이터 형식을 변경해야 하는 경우, 컴포넌트 계층 전체에서 업데이트하는 것이 어려울 수 있습니다. - 중간 컴포넌트에 불필요한 프로퍼티 전달:
컴포넌트 분리 과정에서 중간 컴포넌트를 통해 불필요한 프로퍼티가 전달될 수 있어 불필요한 복잡성을 초래할 수 있습니다. - 누락된 프로퍼티 인지의 어려움:
필요한 프로퍼티가 타겟 컴포넌트에 전달되지 않은 상황을 인지하기 어려울 수 있어 잠재적인 문제를 발견하기 어려울 수 있습니다. - 프로퍼티 이름 변경 추적의 어려움:
프로퍼티 이름이 계층에서 변경되면 해당 값을 추적하고 업데이트하는 것이 어려워질 수 있습니다.
Prop drilling 해결하는 방법
- Context API:
React의 Context API를 사용하여 데이터를 전역적으로 공유할 수 있습니다. Context를 생성하고 값을 제공하는 컴포넌트를 작성한 다음, 필요한 컴포넌트에서 useContext 훅을 사용하여 해당 값을 직접 접근할 수 있습니다.
이를 통해 중간 컴포넌트를 거치지 않고도 데이터를 전달할 수 있습니다. - Redux 또는 다른 상태 관리 라이브러리:
Redux와 같은 상태 관리 라이브러리를 사용하면 애플리케이션의 상태를 중앙에서 관리할 수 있습니다. 상태를 저장하고 필요한 컴포넌트에서 상태를 가져와 사용할 수 있습니다.
이를 통해 prop drilling을 피하고 상태를 전역적으로 공유할 수 있습니다. - Custom Hooks:
Custom Hooks를 사용하여 관련된 로직을 재사용 가능한 함수로 추상화할 수 있습니다. 커스텀 훅 내에서 상태와 로직을 처리하고, 필요한 컴포넌트에서 해당 훅을 호출하여 데이터를 가져올 수 있습니다.
이를 통해 prop drilling을 해소하고 데이터 전달을 보다 간편하게 할 수 있습니다. - Render Props 패턴과 Children props:
Render Props 패턴이나 Children props를 활용하여 데이터를 부모 컴포넌트에서 자식 컴포넌트로 전달할 수 있습니다.
Render Props 패턴은 부모 컴포넌트에서 함수를 정의하고, 자식 컴포넌트에서 해당 함수를 호출하여 데이터를 전달받을 수 있습니다.
Children props는 부모 컴포넌트에서 컴포넌트 태그 사이의 내용을 자식 컴포넌트로 전달합니다.
Reference
프로퍼티 내리꽂기 (prop drilling)
Passing Data Deeply with Context
성실하게