컴포넌트 트리에 데이터 공급 (Context)

모든 데이터를 가지고 있는 컴포넌트가 Provider라는 공급자 역할을 하는 컴포넌트에게 자신이 갖고 있는 모든 데이터를 전달한다. 이 Provider라는 컴포넌트는 자신의 자손에 해당하는 모든 컴포넌트에게 직통으로 데이터를 전달할 수 있다.
Provider 컴포넌트의 자식 컴포넌트들로 배치되어 해당 Provider 컴포넌트가 공급하는 모든 데이터에 접근할 수 있는 컴포넌트들의 영역을 context(문맥)이라고 한다.

기본공식 :

// Context 생성
const MyContext = React.createContext(defaultValue); 

// Context Provider를 통한 데이터 공급
<MyContext.Provider value={전역으로 전달하고자 하는 값}>
  {/* 이 Context 안에 위치할 자식 컴포넌트들 */}
</MyContext.Provider>

1. Context 생성

export const DiaryStateContext = React.createContext();

React.createContext를 사용하여 Context를 생성한다.
컴포넌트 파일에는 export default App; 과 같이 컴포넌트를 내보내는 export default가 포함되어 있다.

이와 마찬가지로 Context 역시 export를 통해 내보내줘야 하는데, 다른 컴포넌트들이 Context에 접근하여 공급자가 공급하는 데이터를 받아올 수 있어야 하기 때문이다.
한 파일당 export default는 한 번만 사용 가능하므로(이미 부모컴포넌트인 App에서 사용) Context는 export만 사용한다. 한 파일 내에서도 export는 여러번 사용할 수 있다.

2. Context Provider를 통한 데이터 공급

부모컴포넌트 App.js

return (
  <DiaryStateContext.Provider value={data}>
    <div className="App">
      <DiaryEditor/>
      <div>전체 일기 : {data.length}</div>
      <div>기분 좋은 일기 개수 : {goodCount}</div>
      <div>기분 나쁜 일기 개수 : {badCount}</div>
      <div>기분 좋은 일기 비율 : {goodRatio}</div>
      <DiaryList/>
    </div>
  </DiaryStateContext.Provider>
);

데이터 전달받을 자식 컴포넌트 DiaryList.jsx

import React , {useContext} from 'react';
import {DiaryStateContext} from "./App";

React의 기능이므로 useContext를 불러오고 App.js의 Provider를 불러와야 하므로 App.js에서 DiaryStateContext를 불러온다.

const diaryList = useContext(DiaryStateContext);

기존에 받고있던 prop을 없애주고 컴포넌트 내에 useContext를 추가해준다.