15장 context API

Context API는 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을때 유용한 기능
예를 들어 사용자 로그인 정보, 애플리케이션 환경 설정, 테마 등 여러 종류..리덕스, 리액트 라우터, styled-components 등 라이브러리가 Context API 기반

• 순서
  Context API를 사용한 전역 상태 관리 흐름 이해 -> 기본적인 사용법-> 동적 Context사용 -> Consumer 대신 Hook 또는 static contextType 사용

Consumer 사용하기

Render Props로 값을 컴포넌트에 전달한다
<예시>

const RenderPropsSample = ({ children }) => {
	return <div>결과: {children(5)}</div>;
} 
export default RenderPropsSample

----------------------------------------------------

<RenderPropsSample>{value => 2* value}</RenderPropsSample>

RenderPropsSample에게 children props로 파라미터에 2를 곱해서 반환하는 함수를 전달하면ㅁ 해당 컴포넌트에서는 이 함수에 5를 인자로 넣어서 "결과 10"을 렌더링 한다.

정리

기존에는 컴포넌트 간에 상태를 교류해야할때 무조건 부모 -> 자식 흐름으로 props를 통해 전달 했지만 Context API 를 통해 더욱 쉽게 교류 가능.
컴포넌트 구조가 간단하다면 사용안해도 되고 단순 상태 관리는 context API , 리덕스는 더 부가적인 기능 있다.