[React] 컨텍스트 개념 이해하기

컴포넌트 간 데이터 흐름

기본적으로 컴포넌트는 서로(자식, 부모) 간에 연결이 되어 있어야 데이터를 주고받을 수 있습니다. 예를 들어 컴포넌트의 프로퍼티(props) 값은 데이터가 위에서 아래로 흐르는 트리 구조의 형태를 띠고 있습니다.

따라서 props나 state는 부모와 자식 컴포넌트가 연결된 상태에서 공유가 가능한 데이터입니다. 그림을 참고해 보면 root가 최상위 컴포넌트입니다. 만약에 data라는 데이터를 root에서부터 A3로 전달한다고 하면 그 과정은 Root -> A -> A1 -> A3가 됩니다. 그런데 이 경우에 중간에 껴있는 컴포넌트인 A1이나 A의 경우 data라는 프로퍼티가 필요 없을 수도 있고, 전달 과정에서 이 때문에 누락 될 수도 있습니다. 이렇게 되면 리액트에서 오류를 발생시킵니다. 그렇다면 해결 방법은 A와 A1을 거치지 않고바로 A3로 data를 전달하면 되는데 이 해법이 되는 것이 바로 컨텍스트(context)입니다.

컨텍스트와 관찰자 패턴

컨텍스트는 부모와 자식 컴포넌트가 연결되어 있지 않아도 데이터를 공유할 수 있게 해 줍니다. 마치 데이터 저장소 역할을 하다가 필요 데이터 요청 시에 요청한 컴포넌트에게 데이터를 공급하는 느낌이라고 할 수 있습니다.

출처 : https://www.toptal.com/react/react-context-api

이 사진을 참고하면 알 수 있듯이, 'WithoutContextAPI'의 경우 순차적으로 컴포넌트를 거쳐 Car.js에 데이터를 전달한 것에  반해, 'WithContextAPI'의 경우 App.js에 같이 묶어있는 MyProvider.js에서 Car.js로 바로 데이터를 전달하는 것을 볼 수 있습니다. 이때 MyProvider.js는 데이터를 공급하는 '공급자'가 되고 Car.js는 이를 관찰(소비)하는 '관찰자(소비자라고도 부릅니다. 저는 소비자라고 하겠습니다.)'가 됩니다. 공급자는 데이터를 보관하고 변경, 공급하는 역할을 합니다. 소비자는 데이터를 얻기 위해 공급자를 구독해 데이터를 소비합니다. 마치 우리가 콘텐츠를 소비하고자 하는 유튜버를 구독해 주기적으로 컨텐츠를 보며 소비하는 것처럼 말입니다.

공급자와 소비자 개념이 도입되면서 데이터가 굳이 모든 컴포넌트를 거치지 않아도 되며 컴포넌트 간의 자료 의존성이 없어졌습니다. 이런 흐름을 만들어 주는 기술이 바로 컨텍스트라고 할 수 있겠습니다.