인프런 커뮤니티 질문&답변

안녕하세요 이정환입니다.

App 컴포넌트의 리턴문 내부에 DiaryStateContext의 Provider와 DiaryDispatchContext의 Provider를 함께 사용하는것이 아닌 DirayStateContext의 Provider를 두번 연달아 쓰셨네요 오타인것 같습니다. 아래와 같이 변경하시면 문제 해결될 것으로 보입니다

return (
  <DiaryStateContext.Provider value={data}>
    <DiaryDispatchContext.Provider value={{ onCreate, onUpdate, onDelete }}>
      <Routes>
        <Route path="/" element={<Home />}></Route>
        <Route path="/new" element={<New />}></Route>
        <Route path="/diary/:id" element={<Diary />}></Route>
        <Route path="/edit/:id" element={<Edit />}></Route>
        <Route path="*" element={<Notfound />}></Route>
      </Routes>
    </DiaryDispatchContext.Provider>
  </DiaryStateContext.Provider>
);

안녕하세요, 인프런 AI 인턴입니다. zha8248님!

질문해주신 내용에 대해 비슷한 주제의 질문과 답변을 찾아서 안내드립니다.

문제의 원인과 해결 방법

질문 내용을 보니 hooks가 객체가 아닌 함수 형태로 출력되는 문제를 겪고 계신 것 같습니다. 이는 Context를 올바르게 사용하지 못했기 때문일 수 있습니다.

동일한 맥락에서 비슷한 문제를 겪었던 다른 사례를 소개하겠습니다:

1. 작성완료 후 onCreate는 함수 에러를 해결하는 방법
   관련 있는 부분:
   

   
   <DiaryDispatchContext.Provider value={[
     onCreate,
     onUpdate,
     onDelete,
   ]}>
   

   
   위 코드는 배열을 사용해 Context를 전달하고 있어 이후에 객체로 수정이 필요합니다.
   

   <DiaryDispatchContext.Provider value={{
      onCreate,
      onUpdate,
      onDelete,
    }}>

2. 작성완료 버튼 후 ‘onCreate is not a function’ 에러 해결 방법
   관련 있는 부분:
   

   
   const { onCreate } = useContext(DiaryDispatchContext);
   

   
   

위와 같은 코드를 사용해 DiaryDispatchContext를 통해 onCreate를 가져오는 방식이 잘못될 경우 나타나는 현상이 있을 수 있습니다.

주요 문제 및 해결 방법

위의 사례처럼 Context를 올바르게 전달하고 있는지 다시 확인하시기 바랍니다. 오류 코드에서는 <DiaryStateContext>와 <DiaryDispatchContext>를 중첩해서 사용하셨는데, 이것이 문제의 원인이 될 수 있습니다. 아래와 같이 Context를 분리하여 사용하는지 확인해보세요:

return (
  <DiaryStateContext.Provider value={data}>
    <DiaryDispatchContext.Provider value={{ onCreate, onUpdate, onDelete }}>
      <Routes>
        <Route path="/" element={<Home />}></Route>
        <Route path="/new" element={<New />}></Route>
        <Route path="/diary/:id" element={<Diary />}></Route>
        <Route path="/edit/:id" element={<Edit />}></Route>
        <Route path="*" element={<Notfound />}></Route>
      </Routes>
    </DiaryDispatchContext.Provider>
  </DiaryStateContext.Provider>
);

이렇게 Context를 분리해 하나의 Provider 내에 또 다른 Provider를 중첩해서 사용하는 대신 각각 독립적으로 사용해보시기 바랍니다.

추가로, 아래의 관련 질문과 답변을 확인하시면 더 도움이 될 것 같습니다:
- 작성완료 시 onCreate 함수 호출 문제
- data와 onCreate, onRemove, onEdit의 Context 전달 이유

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.