context API

context API

프로젝트에서 전역적으로 사용할 데이터(로그인 정보, 앱 환경 설정 등)가 있을 때 유용한 기능이다.

리액트는 컴포넌트 간에 데이터를 props로 전달하기 때문에 컴포넌트 여기저기서 필요한 데이터는 최상위 컴포넌트인 App의 state에 넣어서 관리한다.

여기서 G 컴포넌트는 전역 상태를 업데이트하고, F와 J 컴포넌트는 리렌더링한다고 가정하자. 그리고 App이 지니고 있는 value를 F,G 컴포넌트에 전달하려면 여러 컴포넌트를 거쳐 불편하다. 

이렇게 context API를 사용하면 context를 만들어 단 한 번에 원하는 값을 받아올 수 있다.

 

예제

src/contexts

-> color.js : context 데이터 관리

src/components

-> ColorBox.js : 색상 box를 보여주는 컴포넌트

-> SelectColor.js : context 색상을 변경하는 컴포넌트

src/App.js

 

useContext

Hook 중에서 useContext를 사용하면 아주 편하게 사용할 수 있다. ColorBox.js 컴포넌트의 코드를 다음과 같이 간결하게 할 수 있다.