[React] Props 드릴링 문제 해결하기

App 컴포넌트에서 드릴링이 문제되는 것들을 useContext Hook을 사용해서 해결할 수 있다.

export const DiaryStateContext = React.createContext();
export const DiaryDispatchContext = React.createContext();

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

이런 식으로 하위 컴포에서 사용하고자 하는 함수들을 value 값을 이용해서 사용할 수 있다. 이렇게 된다면 기존에 DiaryEditor, DiaryList에서 프롭으로 전달되던 것들을 지워도 해당 데이터나 함수를 하위 컴포에서 사용할 수 있다.