[React] 컨텍스트 개념

컨텍스트란?

컴포넌트는 프로퍼티와 state 그리고 컨텍스트로 이루어져 있다.

프로퍼티와 state는 부모와 자식 컴포넌트가 연결된 상태에서 공유하는 데이터인 반면,

컨텍스트는 부모와 자식 컴포넌트가 연결되어 있지 않아도 데이터를 공유한다.

'데이터 공유 저장소' 와 '데이터 전파'의 역할을 한다고 알아두면 좋을 것 같다.

 

관찰자 패턴

데이터를 갖고 있는 프로퍼티를 원하는 컴포넌트에 바로 전달하기 위해서는 관찰자 패턴이라는 개념의 이해가 필요하다

관찰자 패턴은 데이터는 공급자가 관리하고 관찰자는 공급자를 구독하여 데이터를 얻는 방식이다.

이러한 관찰자 패턴을 사용하게 되면 공급자와 소비자(관찰자)가 역할을 분리하여 데이터를 관리하게 된다.

 

예를 들어 최상위 컴포넌트를 1컴포넌트라 하고, 최하위 컴포넌트를 5컴포넌트라 할 때 1컴포넌트에서 5컴포넌트로 데이터를 전달하고 싶다면, 1컴포넌트에서 데이터가 출발하여 공급자에 보관되고 공급자는 그 데이터를 소비자에게 전달하게 된다.

 

관찰자와 소비자의 역할과 관계

공급자 - 데이터보관, 데이터 변경, 소비자에게 데이터를 공급하는 역할

소비자(관찰자) - 공급자를 구독하여 데이터를 소비하는 역할

 

* 소비자는 공급자보다 낮은 관계에 있어야 한다.

* 소비자는 공급자가 제공하는 콜백함수로 데이터를 변경할 수 있다.

 

공급자 구현방법

공급자 역할을 할 컴포넌트에 공급자의 자료형(childContextTypes), 데이터 제공 함수(getChildContext())를 정의한다.

(단, 클래스형 컴포넌트로만 공급자 구현이 가능하다)

공급자의 데이트는 state로 관리한다.

 

공급자를 컴포넌트에서 분리시키는 방법도 있다.

이 방법을 사용할 경우는 컨텍스트 변경에 대한 비교를 위해 Component클래스를 사용한다.

 

소비자 구현방법

소비자 역할을 할 컴포넌트에 contextTypes 속성을 추가하여 공급자에게 구독할 항목을 정의한다.

이때 하이어오더 컴포넌트 개념을 사용하면 매번 속성 추가를 해야하는 번거로움을 없앨 수 있다.

 

소비자를 반환하는 하이어오더 컴포넌트를 만들고, 소비자로 만들고 싶은 컴포넌트를 인자로 전달하여 소비자를 구현한다.