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

안녕하세요

이정환입니다.

질문이 3가지로 보이는데요 나누어서 설명 해 드리겠습니다 😃

질문 1.

먼저 DiaryStateContext.Provider의 value로 {data, onCreate, onRemove} 이렇게 넣으면 prop이 바뀌면 재생성된다는 것이 이해가 안되요. onCreate랑 onRemove는 useCallback으로 재생성 되는 것을 막아 놓은 것 아니었나요? 헷갈리네요.

먼저 DiaryStateContext.Provider에 value로 {data, onCreate, onRemove, onEdit}처럼 함수와 data를 함께 묶은 '객체'를 전달하게 되면 data의 값이 변경될 때 이 '객체' 자체가 다시 생성되게 됩니다. 이에 따라 함수는 재 생성되지 않지만 DiaryStateContext.Provider에게 전달되는 value가 재 생성되기 때문에 리렌더가 발생하게 됩니다.

질문 2.

두번째로 중첩으로 하는 이유가 잘 이해가 안 됩니다. 왜 중첩으로 하면 이게 해결이 될까요? 어차피 memoizedDispatches로 useMemo를 썼으면 그냥 DiaryStateContext.Provider에 value로 넣으면 안되는 건가요. 중첩으로 하는 이유가 잘 납득이 안됩니다. DiaryStateContext.Provieder value={data, memoizedDispatches} 이렇게 하면 안되나요?

여기서의 요점은 Context를 분리하는데에 있습니다.

memoizedDispatch는 말씀하신대로 useMemo로 래핑된 값이기에 재 생성되지 않습니다.

그러나 DiaryStateContext.Provider에게 value로 전달되는 객체가 재 생성됩니다. 왜냐면 data가 바뀌기 때문이지요 따라서 재 생성되지 않는 함수들은 아예 DiaryDispatchContext.Provider로 분리하여 전달하는 것 입니다.

질문 3.

그리고 useMemo로 묶는 부분도 다시 한번 설명해주실 수 있나요? useCallback으로 막아놨는데 왜 useMemo로 다시 묶어야 할까요 그냥 onCreate, onRemove, onEdit을 묶지 말고 따로따로 DiaryStateContext.Provider의 value로 {data, onCreate, onRemove} 이렇게 보내주면 안될까요?

useMemo로 묶는 이유는 객체를 재 생성하지 않기 위함입니다.

DiaryDispatchContext.Provider에게 value로 전달하는 객체에 담기는 함수들이 useCallback으로 재 생성되지 않도록 만들어졌다고 해도 data State가 변하는 순간 App 컴포넌트가 리렌더되어 DiaryDispatchContext.Provider에게 전달하는 객체 자체가 재 생성됩니다.

따라서 객체 자체도 재 생성하지 않게 하기 위해 useMemo를 사용한 것 입니다.

이해가 안되는 부분이 있다면 질문 추가로 더 부탁드립니다

감사합니다.

안녕하세요! 강의를 보다가 같은 부분에서 질문이 생겨 답글 남깁니다! 위에서 말씀하신 것처럼 DiaryStateContext 컨테이너의 Props인 data가 변경되면 하위 컨테이너들이 모두 리렌더 되는 것 아닌가요?

아니면 <DiaryStateContext.Provider value={data}>

<Provider/>의 value에 객체가 아닌 단수 개의 인자(ex. data)만 전달되면 그 값(data)이 새롭게 갱신되어도 리렌더되지 않는 기능이라도 있는 것인가요?