리액트를 다루는 기술 - Context API

Context API는 리액트 프로젝트에서 전역적으로 사용할 데이터가 (사용자 로그인 정보, 애플리케이션 환경 설정 테마 등) 있을때 유용한 기능

 

리덕스, 리액트 라우터, styled-components 등의 라이브러리는 Context API를 기반으로 구현되었습니다.

---

Context API를 사용한 전역 상태 관리 흐름 이해하기

리액트 애플리케이션은 컴포넌트 간 데이터를 props로 전달하기 때문에, 전역적으로 사용할 데이터는 최상위 컴포넌트인 App의 state에 넣어서 관리합니다.

→ 유지 보수성이 낮아질 가능성이 있다.

(이유 : 최상위 컴포넌트에서 여러 컴포넌트를 거쳐 props로 원하는 상태와 함수를 전달하기 때문)

 

★해결 :  리덕스 같은 상태 관리 라이브러리를 사용해 전역 상태 관리 작업을 더 편하게 처리한다.

Context API 사용 : Context를 만들어 단 한 번에 원하는 값을 받아와서 사용할 수 있다.

 

 

 

Context 만들기

Consumer 사용하기 (Context에 있는 값 사용)

Provider

Provider를 사용하면 Context value를 변경할 수 있다.

useContext Hook 사용하기 (Context에 있는 값 사용, Consumer와 다른 방식이지만, 같은 용도)