컴퍼넌트 트리에 데이터 공급

1.context를 생성

export const DiaryStateContext = React.createContext<Info[] | undefined>(undefined);
export const DiaryDispatchContext = React.createContext<any|undefined>(undefined);// 메소드를 전달할 때 제네릭 부분을 어떤 것을 사용 할지 모르겠다. 

2.provider를 만들면 props를 사용하지 않고 데이터를 공급(props drilling 방지) 할 수 있으며 코드의 가독성이 좋아진다.변수명.DispatchContext를 중첩으로 사용한다.컴퍼넌트가 리렌더 시 자식 컴퍼넌트에 전달하는 메소드들 때문에 리렌더링이 된다.

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

3.useContext를 통해 데이터를 전달 받는다.

    const diaryList = useContext(DiaryStateContext);
    const {onDelete,onEdit} = useContext(DiaryDispatchContext);