[React] [감정일기장] - 기초 마지막

현재 구조의 문제점 : onRemove()와 onEdit()은 DiaryItem에 전달되기 위해서 DiaryList를 거쳐가고 있다.

• Props drilling : 중첩된 여러 계층의 컴포넌트에게 props를 전달해 주는 것을 의미

모든 데이터를 한 곳에서 관리하는 Provider(공급자)를 만든 후 , 공급자에서 필요한 데이터를 선택자로 보낸다.

//App.js

//data를 내보내는 context
export const DiaryStateContext = React.createContext();

//data의 상태를 변화시키는 함수를 내보내는 context
export const DiaryDispatchContext = React.createContext();

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>
)

Provider로 컴포넌트들을 감싸준다
props는 필요 없다.

//DiaryItem.js

const {onCreate} = useContext(DiaryDispatchContext)

//DiaryList.js

const diaryList = useContext(DiaryStateContext);
 
//DiaryItem.js

const {onRemove, onEdit} = useContext(DiaryDispatchContext);

이건 다시 복습해보기