리액트를 다루는 기술 개정판 [Context API]

15. Context API

  - Context API는 전역적으로 사용할 데이터가 있을 때 유용한 기능

  - 예) 로그인 정보, 애플리케이션 환경 설정, 테마 등

 

  - 새 Context 만들기

    . import { createContext} from 'react';

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

 

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

    . Provider를 사용할 때는 value 값을 명확히 명시해야 한다.

 

  - 동적 Context 사용하기

    . Context의 value에 값이 아닌 함수를 전달할 수도 있다.

    . onClick: 좌클릭, onContextMenu: 우클릭 (e => {e.preventDefault();}해주면 브라우저 메뉴가 나타나지 않음)

 

  - Consumer 대신 Hook or static contextType 사용하기

    . useContext Hook 사용하기 (함수형 컴포넌트)

    . static contextType 사용하기 (클래스형 컴포넌트)

      . static contextType을 정의하면 클래스 메서드에서도 Context에 넣어 둔 함수를 호출할 수 있다.

      . 그러나, 한 클래스에서 하나의 Context만 사용할 수 있다.

      . 컴포넌트를 클래스형으로 작성하는 일은 많지 않기 때문에 useContext를 사용하는 쪽을 권한다.