[React] Context API

Context

Context  API는 리액트 프로젝트에서  단계마다 일일이 props를 넘겨주지 않고 전역적으로 사용할 데이터가 있을 때 유용한 기능이다

-예시 : 사용자 로그인 정보, 애플리케이션 환경 설정, 테마 등

- 로그인 데이터, 웹 내 사용자가 쓰는 설정 파일, 테마, 언어 등 다양하게 컴포넌트간 공유되어야할 데이터로 사용

- redux, react-router, styled-components 등의 라이브러리는 Context API를 기반으로 구현되어 있다

 

# Context  API 사용법

• createContext

import {createContext} from 'react';

const MyContext = createContext({color:'black'});

export default MyContext;

- react 모듈에서 createContext를 import 해온 후 새로운 Context를 만들고 변수에 담아서 사용한다.

- 파라미터에는 해당 Context의 기본 상태를 지정한다

- defaultValue(위 코드에서 color: 'black') 파라미터는 적절한 provider를 찾지 못했을 때 쓰이는 값이다

 

• Context.Provider

<MyContext.Provider value={{color:'red'}}>
    <div>
    	<ColorBox/>
    </div>
</MyContext.Provider>

- provider 컴포넌트는 정의한 vvalue prop을 받아서 이 값을 하위 컴포넌트에게 전달하는 역할

- provider를 전달하는 변수는 꼭 value를 사용해야 한다

- provider를 사용했는데 value를 명시하지 않았다면 기본값을 사용하지 않았기 때문에 오류가 발생

- 전달받는 컴포넌트 수의 제한은 없다

- provider 하위 provider 배치가 가능하며, 그럴 경우 하위 provider 값이 우선시 된다

- provider 하위에 context를 가진 component는 provider의 value로 가진 state가 변화할 때마다 다시 렌더링 된다

 

• Context.Consumer

<MyContext.Consumer>
	{value =>
    	<div background:value.color/>
    }
</MyContext.Consumer>

- context 변화를 구독하는 컴포넌트

- context의 자식은 함수(컴포넌트)이어야 한다

- 이 함수(컴포넌트)가 가지는 context 값은 가장 가까운 provider의 값이다

- 상위 provider가 없다면 createContext()에서 정의한 defaultvalue를 가진다

 

• Context.displayName

const MyContext = createContext(/*value값*/)

MyContext.displayName = 'MyDisplayName';

<MyContext.Provider>	//"MyDisplayName.Provider" in DevTools	
<MyContext.Consumer>	//"MyDisplayName.Consumer" in DevTools

- Context 객체는 displayName 문자열 속성을 설정할 수 있다

- React 개발자 도구는 이 문자열을 이용해서 context를 어떻게 보여줄지 결정한다

 

 

context를 사용하기 전에 고려할 것

- context를 사용하면 컴포넌트를 재사용하기가 어려워지므로 꼭 필요할 때만 사용해야 한다

- 여러 레벨에 걸쳐 props를 넘기는 걸 대체하는 데에 context보다 컴포넌트 합성이 더 간단한 해결책일 수도 있다

 

 

출처

길벗) 리액트를 다루는 기술

https://ko.reactjs.org/docs/context.html

https://kyounghwan01.github.io/blog/React/react-context-api/#api