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

작성한 질문수

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

data와 onCreate, onRemove, onEdit 을 같은 context에서 전달하면 안되는 이유

작성

418

안녕하세요 🙋‍♂️

한 입 크기로 잘라먹는 리액트 강사 이정환 winterlood입니다!
물론 질문은 수강생 여러분들 편하게 해 주시면 되지만!
아래의 몇 가지 규칙만 지켜주시면 더 빠르고 정확한 답변을 드릴 수 있습니다!

- 개인적인 고민 상담도 받아드립니다 :)
- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!
- 서로 예의를 지키며 존중하는 문화를 만들어가요. 
- 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

안녕하세요! 

6섹션 가장 마지막 강의인 '컴포넌트 트리에 데이터 공급하기 - Context' 강의 수강 중에 이해되지 않는 부분이 있어 질문 드립니다.

(밑의 코드는 강사님께서 코드샌드박스로 올려주신 코드입니다!)

import React, {

useCallback,

useEffect,

useMemo,

useReducer,

useRef,

createContext

} from "react";

import DiaryEditor from "./DiaryEditor";

import DiaryList from "./DiaryList";

import "./App.css";

export const DiaryStateContext = createContext(null);

export const DiaryDispatchContext = createContext(null);

const reducer = (state, action) => {

switch (action.type) {

case "INIT": {

return action.data;

}

case "CREATE": {

const created_date = new Date().getTime();

const newItem = {

...action.data,

created_date

};

return [newItem, ...state];

}

case "REMOVE": {

return state.filter((it) => it.id !== action.targetId);

}

case "EDIT": {

return state.map((it) =>

it.id === action.targetId

? {

...it,

content: action.newContent

}

: it

);

}

default:

return state;

}

};

const App = () => {

const [data, dispatch] = useReducer(reducer, []);

const dataId = useRef(0);

const getData = async () => {

setTimeout(async () => {

const res = await fetch(

"https://jsonplaceholder.typicode.com/comments"

).then((res) => res.json());

const initData = res.slice(0, 20).map((it) => {

return {

author: it.email,

content: it.body,

emotion: Math.floor(Math.random() * 5) + 1,

created_date: new Date().getTime(),

id: dataId.current++

};

});

dispatch({ type: "INIT", data: initData });

}, 2000);

};

useEffect(() => {

getData();

}, []);

const onCreate = useCallback((author, content, emotion) => {

dispatch({

type: "CREATE",

data: { author, content, emotion, id: dataId.current }

});

dataId.current += 1;

}, []);

const onRemove = useCallback((targetId) => {

dispatch({ type: "REMOVE", targetId });

}, []);

const onEdit = useCallback((targetId, newContent) => {

dispatch({

type: "EDIT",

targetId,

newContent

});

}, []);

const memoizedDiaryAnalysis = useMemo(() => {

const goodCount = data.filter((it) => it.emotion >= 3).length;

const badCount = data.length - goodCount;

const goodRatio = (goodCount / data.length) * 100.0;

return { goodCount, badCount, goodRatio };

}, [data.length]);

const { goodCount, badCount, goodRatio } = memoizedDiaryAnalysis;

const store = {

data

};

const memoizedDispatch = useMemo(() => {

return { onCreate, onRemove, onEdit };

}, []);

return (

<DiaryStateContext.Provider value={store}>

<DiaryDispatchContext.Provider value={memoizedDispatch}>

<div className="App">

<DiaryEditor />

<div>전체 일기 : {data.length}</div>

<div>기분 좋은 일기 개수 : {goodCount}</div>

<div>기분 나쁜 일기 개수 : {badCount}</div>

<div>기분 좋은 일기 비율 : {goodRatio}%</div>

<DiaryList />

</div>

</DiaryDispatchContext.Provider>

</DiaryStateContext.Provider>

);

};

export default App;

data와 onCreate, onRemove, onEdit 함수를 같은 context의 props로 넘겨주게 되면 data가 변경될 때마다 세개의 함수들도 리렌더링 되어서 최적화가 풀리게된다고 하셨는데 이 부분이 잘 이해가 되지 않습니다. 

Provider도 하나의 컴포넌트라서 props가 바뀌면 재생성 되고, 하위 컴포넌트도 다시 재생성이 된다고 하셨는데, <DiaryDispatchContext.Provider>도 <Diary StateContex.Provider>의 하위 컴포넌트 아닌가요? 그래서 저는 상위 컴포넌트인  <Diary StateContext.Provider> 가 재생성 될 때 하위 컴포넌트인 <DiaryDispatchContext.Provider>도 재생성 되면서 리렌더링이 일어날 거 같다고 생각했습니다. 부모 컴포넌트가 리렌더링 되면 자식 컴포넌트도 같이 리렌더링 되니까요. 

혹시 App 컴포넌트에서 세 개의 함수(onCreate, onRemove, onEdit)를 useCallback과 useMemo로 최적화를 해주었기 때문에 mount될 때만 생성이 되고 부모 컴포넌트인 <Diary StateContex.Provider>가 리렌더링 되더라도 <DiaryDispatchContext.Provider>는 리렌더링 일어나지 않는 건가요?

하지만 그렇다면 data와 함수를 같은 context로 전달해준다고 하더라도, 세 개의 함수를 최적화하기 위해 사용된 useCallback 에서 의존성 배열이 []로 전달되었으니 data의 state가 변경되어 리렌더링 되더라도 함수는 재생성 되지 않지 않을까 생각했습니다. 

제가 어떤 점을 잘못 이해하고 있는 건지, 그리고 각각 다른 context로 넘겨주어야 하는 이유를 알려주시면 감사하겠습니다! 그리고 <DiaryDispatchContext.Provider> 가 <Diary StateContex.Provider>보다 상위에 와도 상관 없는지도 궁금합니다! 읽어주셔서 감사합니다!!

react javascript nodejs

답변 1