npm create react-app context-first-project
위의 명령어로 Context API를 연습할 리액트 프로젝트를 생성
새로운 Context 만들기
프로젝트 생성 후, 새로운 Context 만들고 아래처럼 디렉터리와 파일을 만듭니다.
새로운 Context를 만들 때는 createContext 함수를 사용하고, 파라미터는 해당 Context의 기본 상태를 지정합니다.
Consumer 사용
ColorBox라는 컴포넌트를 만들어 ColorContext 안에 들어 있는 색상을 보여주 주고 이 때 색상을 props로 받아오는 것이 아니라
ColorContext 안에 들어있는 Consumer 라는 컴포넌트를 통해 색상을 조회합니다.
src 디렉터리에 components 디렉터리를 생성, 그 안에 ColorBox.js 파일을 생성하여 코드를 입력합니다.
위와 같이 나오면 됩니다.
Consumer 사이에 중괄호를 열어서 그 안에 함수를 넣었습니다. 이러한 패턴을 Funtion as a child, 혹은 Render Props라고 합니다. 컴포넌트의 children이 있어야 할 자리에 일반 JSX 혹은 문자열이 아닌 함수를 전달하는 것 입니다.
※ Render Props 예제
위의 이미지처럼 컴포넌트를 만들고 아래 이미지 처럼 렌더링하면
이런 형태의 결과물이 나타납니다.
RenderPropsSample에게 children props로 파라미터에 인자를 제곱해서 반환하는 함수를 전달하면 해당 컴포넌트에서는 이 함수에 5를 인자로 넣어서 "결과: 25"를 렌더링합니다.
컴포넌트를 다 만들었다면 이 컴포넌트를 App에 렌더링 하면
이제 리액트 개발 서버를 열어 확인하면 
해당 색의 박스나 나오면 성공입니다.
Provider
Provider를 사용하면 Context의 value를 변경할 수 있습니다.
기존에 createContext 함수를 사용할 때는 Context의 기본 값을 넣어 주었지만 이 기본 값은 Provider를 사용하지 않았을 때만 사용됩니다. 만약 Provider를 사용했고 value를 명시하지 않으면 이 기본값을 사용하지 않기 때문에 오류가 발생합니다.
Provider 사용할 때는 반드시 value 값을 명시해 주어야 합니다.
