Props Drilling
App 컴포넌트의 자식 컴포넌트로 Child 컴포넌트가 있다고 가정합니다.
props는 App 컴포넌트에서 Child 컴포넌트로만 데이터를 전달할 수 있습니다. 따라서, 컴포넌트 계층 구조에서 데이터를 바로 한 단계 아래로 전달하는 경우에는 문제가 되지 않습니다.
App 컴포넌트의 자식으로 ChildA 컴포넌트가 있고, ChildA의 자식으로 ChildB 컴포넌트가 있다고 가정해 보겠습니다.
컴포넌트 계층 구조가 두 단계 이상으로 깊어지면, App 컴포넌트에서 ChildB 컴포넌트로 데이터를 직접 전달할 수 없습니다. 이는 props가 부모에서 자식으로만 데이터를 전달할 수 있기 때문입니다.
이러한 경우, ChildA 컴포넌트가 중간 다리 역할을 해야 합니다. 즉, App 컴포넌트가 ChildA 컴포넌트로 데이터를 전달한 후, ChildA가 다시 ChildB 컴포넌트로 데이터를 전달하는 방식으로 props를 사용할 수밖에 없습니다.
props를 사용하면 데이터를 중간 다리를 통해 전달해야 하는 경우가 많아질 수 있습니다. 하지만 이러한 방식은 유지보수성과 가독성을 떨어뜨릴 수 있기 때문에, 바람직한 방법이 아닙니다.
React에서는 이러한 상황을 props가 마치 드릴처럼 컴포넌트 계층을 파고 내려가는 것에 비유하여 Props Drilling이라고 부릅니다.
React Context 란?
React Context는 컴포넌트 간에 데이터를 전달하기 위한 방법으로, 기존 props의 단점을 보완하여 이를 대체할 수 있습니다. Props Drilling을 해결해 줄 수 있습니다.
Context는 데이터를 보관하는 일종의 객체입니다. 예를 들어, 우리가 만들었던 ToDoList 앱에서 App 컴포넌트의 todos, onCreate, onUpdate, onDelete 함수들을 Context에 저장할 수 있습니다.
이제부터는 props를 사용하지 않고, Context를 통해 필요한 데이터를 다른 컴포넌트로 전달할 수 있습니다. 이를 통해 Props Drilling 문제를 효과적으로 해결할 수 있습니다.
또한 여러 개의 Context를 만들 수 있습니다.
