[프론트엔드] REACT Context API [1]

context api란?

React는 16.3 버전부터 정식적으로 context api (opens new window)를 지원한다.. 일반적으로 부모와 자식간 props를 날려 state를 변화시키는 과정과는 달리 context api는 컴포넌트 간 서로 간격이 없다. 즉, 컴포넌트를 건너띄고 다른 컴포넌트에서 state, function을 사용할 수 있다.. 또한 redux의 개념보다 context api는 Provider, Consumer, createContext 개념만 알면 적용할 수 있어서 사용이 간편하다.

 

.

context api 언제 쓰는가

 

 

프로젝트 내에서 "환경 설정", "사용자 정보"같은 전역에서 사용되는 데이터를 관리할 때는 상위 컴포넌트(APP)에서 props로 값을 하위 컴포넌트에게 계속 내려줘야한다.

 

A-> G  컴포넌트로 값을 내려준다고 가정 했을경우

 

A에서 props로 B, E 컴포넌트를 거쳐서 G 컴포넌트로 내려줘야한다.

이는 즉 B, E 컴포넌트에도 props 값을 선언해줘야 하고 G 컴포넌트의 상태를 업데이트 하는 함수를 전달할때도 이와 같은 과정이 반복된다는 말이다.

프로젝트 규모가 커질수록 이런 방식의 개발은 유지보수측면에서 좋지 않다.

 

 

 

 

Conext API는 이런과정 없이 위의 그림처럼 컴포넌트를 거치지 않고 한번의 값을 받아서 사용하기 용이하다.

REACT v16.3 업데이트 이후 많은 개선이 이루어져서 사용도 간편해졌고 개념만 알고 손쉽게 적용이 가능해졌다.