컴포넌트 트리(부모)에서 데이터를 하위 컴포넌트(자식)로 전달하기 위해 중간 컴포넌트를 통해 프로퍼티를 내려주는 것
장점
- 명시적인 값의 사용
- 어디서 데이터가 사용되는지 명시적으로 보여줌
- 각 컴포넌트에서 어떤 프로퍼티를 받아 사용하는지를 확인할 수 있어 코드의 의도를 더 명확하게 파악 가능
- 값 추적 용이성
- 값의 흐름을 쉽게 추적 가능
- 디버깅하거나 코드를 변경할 때 더욱 용이
- 코드 변경에 따른 영향 파악
- 코드 변경이 다른 코드에 어떤 영향을 주는지 파악하는 것이 용이
- 변경 사항에 따른 영향을 사전에 예측하고 관리
단점
- 프로퍼티 데이터 형식 변경의 불편
- Prop drilling 데이터의 형식을 변경해야 하는 경우, 컴포넌트 계층 전체에서 업데이트하는 것이 어려움
- 중간 컴포넌트에 불필요한 프로퍼티 전달
- 컴포넌트 분리 과정에서 중간 컴포넌트를 통해 불필요한 프로퍼티가 전달될 수 있어 불필요한 복잡성을 초래
- 자식 컴포넌트에게 props를 통해 정보를 전달해야 해 깊이가 깊어질 수록 복잡성 증대
- 누락된 프로퍼티 인지의 어려움
- 필요한 프로퍼티가 타겟 컴포넌트에 전달되지 않은 상황을 인지하기 힘들어 잠재적인 문제를 발견하기 어려움
- 프로퍼티 이름 변경 추적의 어려움
- 프로퍼티 이름이 계층에서 변경되면 해당 값을 추적하고 업데이트하는 것이 어려움
Props Drilling Problem 해결 방법
- Context API
- React의 Context API를 사용하여 데이터를 전역적으로 공유 가능
- Context를 생성하고 값을 제공하는 컴포넌트를 작성한 다음, 필요한 컴포넌트에서
useContext 훅을 사용하여 해당 값을 직접 접근
- 단, 상단 state를 업데이트할 경우 하위의 모든 컴포넌트가 리렌더링되는 치명적인 성능 이슈 발생
- object 상태가 부분적으로 변경되어도 매번 새로 생성되기 때문에 Context를 사용하는 모든 컴포넌트가 리렌더링