인프런 커뮤니티 질문&답변
작성한 질문수
중첩 Context
작성
·
373
0
강사님 왜 중첩 Context를 사용하는지 이해가 되지 않아 https://www.inflearn.com/questions/800739/context%EC%97%90-%EA%B4%80%ED%95%B4%EC%84%9C-%EC%A7%88%EB%AC%B8%EB%93%9C%EB%A6%BD%EB%8B%88%EB%8B%A4
질문에 답변하신 것을 보았습니다
제가 이해한 바로는 상위 컴포넌트의 state가 변경되면 Context는 리렌더링 되고 리렌더링 되면서 하위 Context로 전달하려는 객체가 재생성되기 때문에 기존과 다른 prop이 왔다고 인식하여 React.memo를 활용하여 리렌더링을 방지하려 했던 것이 의미 없게 된다 따라서 객체에 useMemo를 활용하여 state가 변경되었을 때 재생성되지 않도록 방지하는 것으로 이해하였습니다.
제가 이해한게 맞나요? 그렇다면 중첩 Context가 아닌 useMemo를 활용하면 해결되는 문제 아닌가요? useMemo를 활용하여 state가 변경되어 컴포넌트가 리렌더링될때 재생성되는거만 방지해줄 수 있지 않나요?
답변 1
0
안녕하세요 이정환입니다.
우선 이해하신 내용은 정확히 맞습니다.
다만 중첩 Context를 사용하지 않고 useMemo로만 이 문제를 해결할 수는 없습니다.
그 이유는 data State의 경우에는 실제로 값이 변화해야 하기 때문인데요
만약 data와 onCreate, onDelete, onUpdate 함수를 모두 하나의 객체로 묶어
useMemo로 관리한다면 아마 다음과 같이 관리하게 될 겁니다.
const appData = useMemo(() => ({ data, onCreate, onUpdate, onDelete }), [data]);이렇게 관리하게 되면 data State의 값이 변화할 때 마다 useMemo가 반환하는 객체 값이 계속 변경됩니다. 그러므로 이 데이터를 Context로 부터 공급받는 모든 컴포넌트가 data State의 값이 변경될 때 마다 즉 일기가 추가되거나 수정되거나 삭제될 때 마다 리렌더링이 발생하게 됩니다.
혹시 data와 dispatch들을 한 객체로 묶는 이유가 Context provider가 하나의 value만 전달 가능해서인가요? value에 여러 값을 전달했을 때 하나의 값만 전달되는거처럼 보여져서 질문합니다