[React] Context란?

기존 일반적인 React는 일반적으로 컴포넌트의 props를 통한 데이터 전달 부모에서 자식으로 단방향.
자주 사용하는 데이터의 경우 코드도 복잡하고 사용하는데 불편. 그래서 Context 가 등장함.
컨텍스트는 다른 레벨의 많은 컴포넌트가 특정 컴포넌트를 필요로할 때 주로 사용
Context 는 props 를 통해 전달하는 방식 대신 Component에게 곧바로 전달한다.

로그인 정보나 프로필 정보 등을 이동시키려면 반복 코드가 많아지고 지저분해진다.

Context 사용시

Context 언제 사용해야할까?
여러 개의 Component들이 접근해야하는 데이터를 전달해야할 때
ex) 로그인 여부(+ 로그인, 로그아웃 버튼 노출시 확인 필요), 로그인 정보, UI테마, 현재 언어, 지역 정보 등

기존 방식으로 넘기는 방법

Context 사용한 동일한 코드

ThemeContext를 생성, Provider로 감싸주어야하는데,
최상위인 App 컴포넌트를 Provider를 사용하여 감싸주어서
Provider의 모든 하위 컴포넌트들이 얼마나 많던 다 읽을 수 있다.


Context 사용하기 전에 고려할 점!
컨텍스트는 다른 레벨의 많은 컴포넌트가 특정 컴포넌트를 필요로할 때 주로 사용하는데
컴포넌트와 컨텍스트가 연동이 되면 재사용성이 떨어지기 때문에
다른 레벨의 많은 컴포넌트가 데이터를 필요로하는 경우가 아니라면.
기존 컴포넌트-컴포지션 방식이 적합함.



Context 생성 문법

const MyContext = React.createContext(기본값);

상위 레벨에 매칭되는 Provider가 없다면 기본 값이 사용된다.
기본 값으로 undefined를 넣으면 기본 값이 사용되지 않는다.

Context.Provider : 컨텍스트 생성 후 하위 컴포넌트가 해당 컨텍스트의 데이터를 받을 수 있도록 설정 해야한다. 그 때 사용하는 것이 Provider이다. Provider는 제공자라는 뜻. 모든 Context는 Provider를 갖고 있다. Context.Provider로 컴포넌트를 감싸주면 그 컴포넌트의 모든 하위 컴포넌트들이 접근 가능하다.

<MyContext.Provider value={/* some value */}>

여러개가 감쌀 수 있다. 값이 변경되면 재 렌더링 되며, 중첩 사용이 가능하다. Value가 바뀔 때 마다 상위 컴포넌트가 업데이트 대상이 아니더라도 하위 컴포넌트도 된다. Object.is와 같은 방식으로 체크한다.
아래는 Object.is의 문서이다.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is

Provider value 에서 주의해야할 사항

Provider 컴포넌트가 재렌더링 될 때마다 모든 하위 consumer 컴포넌트가 재렌더링 됨.

Class.contextType 프로바이더 하위에 있는 클래스 컴포넌트에서 컨텍스트의 데이터에 접근하기 위해 사용함.
ClassComponent는 현재 거의 사용하지 않는다.

Context.Consumer : 컨텍스트의 데이터를 구독한다.

function as a child : 컴포넌트의 자식으로 함수를 사용하는 방법. React에서는 하위 컴포넌트를 child 이란 props로 전달하는데 함수를 사용하려면 이렇게 써야한다.

Context.displayName : 컨텍스트 객체는 displayName 이라는 문자열 속성을 가진다. 크롬의 React 개발자 도구에서는 컨텍스트의 Provider나 Consumer를 표시할 때 displayName를 함께 표시해준다.

여러 개의 Context 사용하기

Context.Provider 를 중첩하여 구현한다. 2개 또는 그 이상이 컨텍스트의 값이 자주 함께 사용될 경우 모든 값을 한번에 제공하는 별도의 랜더프랍을 만들어 하는 것이 좋다.

useContext()

함수컨포넌트에서 컨텍스트 사용시 매번 감싸주는 것보다 Hook을 쓰는게 더 좋다.

컨텍스트 객체를 인자로 받아 리턴한다. 컨텍스트 값을 다른 방식과 동일하게 컴포넌트 트리 상에서 상위 프로바이더로부터 받아오고 만약컨텍스트가 변경시 변경된 값과 함께 useContext Hook을 사용하는 컴포넌트가 재렌더링 된다.
만약 useContext Hook을 사용하는 컴포넌트의 렌더링이 꽤 무거운 작업인 경우 별도의 최적화 필요하다.

Context 객체를 넣어야지 Consumer, Provider을 넣으면 안된다.