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

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

우선 Header 컴포넌트의 리렌더링이 계속 발생한다는 그리고 그것을 시각적으로 확인할 수 없다는 것에 대해 먼저 답변드리겠습니다.

다음은 10.3 챕터 강의의 2분 4초경에 확인하는 리렌더링 하이라이트입니다.

자세히 보시면 헤더 컴포넌트의 영역에 하이라이트가 들어오고 있는걸 보실 수 있습니다.

헷갈리신다면 별도로 빨간펜으로 칠해 다시 보여드릴게요

이렇게 "오늘은" 이라는 텍스트 부터 "Sun Feb 04 2024" 텍스트 아래 까지 하나의 박스 형태로

Header 컴포넌트가 하이라이트 되고 있는걸 확인하실 수 있습니다.

다음은 React.memo 적용 후 Header 컴포넌트가 리렌더링 되지 않는다는 것을 확인하고 있는 화면입니다. 강의중 5분 26초 경을 보시면 됩니다.

보시면 위 화면에서는 Sun Feb 04 2024 글자 아래에 경계선이 사라져있습니다. 이를 통해 Header 컴포넌트에는 하이라이팅이 발생하지 않는걸 볼 수 있습니다.

이때 Context.Provider 컴포넌트의 리렌더 하이라이팅을 Header 컴포넌트의 하이라이팅으로 착각하실 수 있는데요, 그렇기에 헷갈리신다면 console.log를 통해 확인하시는게 가장 빠른 방법이라고 안내드리고 있습니다. 따라서 "시각적으로 확인이 안된다", "화면 상으로 전혀 확인이 안된다
는 의견에 대해서는 다시 의견 여쭙고 싶습니다.

다음으로 onUpdate, onDelete, onCreate에 useCallback을 사용해 재생성을 이미 방지했는데 왜 React.memo 기능을 또 써야 하냐고 질문을 주셨는데요

앞서 강의 내용에서 설명드렸듯 리액트의 모든 컴포넌트들은 부모 컴포넌트의 리렌더링 발생시 자동으로 자신도 함께 리렌더링 됩니다. 그리고 이러한 동작을 Props의 변경이 없으면 리렌더링 하지 않도록 방지하는 것이 React.memo의 역할입니다.

따라서 useCallback을 통해 재 생성되지 않도록, 그럼으로써 Props로 전달하는 값이 변경되지 않도록 처리해 주었다면 React.memo를 함께 사용해 Props의 값이 변화하지 않을 경우 컴포넌트를 리렌더링 하지 않도록 설정해주셔야 합니다. 그렇지 않다면 onUpdate, onDelete, onCreate 함수가 재생성 되든 말든 컴포넌트 또한 리렌더링 될 것 입니다.

memo가 아닌 useMemo의 활용 이유가 궁금하신 거라면 11.3 챕터의 6분 30초 경에서 설명드렸듯 컴포넌트 리렌더링시 컴포넌트 내부의 함수, 객체가 모두 다시 생성되기 때문입니다.

  return (
    <>
      <DiaryStateContext.Provider value={data}>
        <DiaryDispatchContext.Provider
          value={{
            onCreate,
            onUpdate,
            onDelete,
          }}
        >

위 코드를 보시면 App 컴포넌트의 return 문 내부에서 DiaryDispatchContext.Provider 컴포너트에게 Prosp로 3개의 함수를 감싸고 있는 객체를 전달하고 있는데요, 해당 객체 역시 앞서 설명드렸듯 App 컴포넌트가 리렌더링 될 경우 (일기 업데이트, 수정, 삭제 등으로 인해) 다시 생성되게 됩니다. 함수와 동일하다고 생각하시면 됩니다.

따라서 onCreate, onUpdate, onDelete 함수가 useCallback으로 감싸져 있다고 해도 Context.Provider 컴포넌트에게 전달되는 value Props의 값이 변화하므로 하위의 컴포넌트에 리렌더링이 발생하게 될 것 입니다.

이런 이유로 인해 3개의 함수를 묶은 객체를 다시 생성하지 않도록 useMemo를 사용해 다음과 같이 최적화 하고 있는 것 입니다.

그런데 이 최적화 역시 시각적으로 확인이 안된다고 하셨는데요 그렇지 않습니다.

다음은 최적화 이전의 상태를 강의중에 확인하는 장면입니다 (11.2 챕터의 11분 10초 경 입니다)

보시면 React 공부하기, 빨래하기, 노래 연습하기 각각의 TodoItem에 일일히 하이라이트가 발생하고 있는걸 보실 수 있습니다. 이를 통해 현재 리스트 내의 모든 TodoItem 컴포넌트가 리렌더링 되고 있는걸 확인할 수 있죠

그러나 다음은 최적화 이후의 상태를 확인 하는 강의 장면입니다.
(11.3 챕터의 9분 0초 경입니다)

위 그림을 보시면 이번에는 React 공부하기 TodoItem 에만 하이라이트가 들어오고 있는걸 보실 수 있습니다. 이는 TodoItem 컴포넌트의 최적화가 이루어졌기 때문에 현재 수정된 아이템 외에는 리렌더링이 발생하지 않기 때문입니다.

안녕하세요, 인프런 AI 인턴입니다. 이동명님.

React의 memo와 context가 강의에서 어떻게 활용되는지에 대해 이해하기가 어려운 부분이 많으신 것 같습니다. 질문하셨던 내용과 관련하여, 몇 가지 유사한 질문과 답변을 소개해 드리겠습니다.

1. “리랜더링 highLight 질문”: 이 질문에서는 강의에서 React.memo를 활용한 최적화 시, Header 컴포넌트의 하이라이트 문제가 언급되었습니다. 이정환 지식공유자님의 답변에 따르면, console.log를 이용하여 리렌더링 여부를 확인해보라고 조언드립니다. 강의 영상에서는 하이라이트가 명확히 보이지 않을 수 있습니다. 따라서 이를 보완하기 위한 방법으로 console.log를 활용하는 것을 추천하신 것 같습니다.

2. “일기 추가 시 DiaryEditor 리렌더링 질문”: useCallback과 React.memo가 확실히 작동하는지에 대한 시각적 피드백이 부족하다는 질문이 있었습니다. 답변에서는 상태 초기화 과정에서 State가 변경되기 때문에 리렌더링이 발생해서 하이라이트가 사라져 보인다고 설명하고 있습니다.

3. “context, 최적화 관련 질문”: 이 질문에서는 context와 memo의 상호작용에 대한 설명이 부족하다는 의견이 있었습니다. 이정환 지식공유자님은 최적화가 반드시 모든 상황에서 필요한 것은 아니며, 상황에 따라 선택적으로 사용하는 것이 좋다고 답변하셨습니다.

질문해주신 내용을 반영하면, 강의에서 하이라이트가 명확하게 보이지 않는 문제는 교수님의 의도와 다르게 전달된 것 같다는 의견이 많습니다. 이 부분에서는 사용자 경험을 향상시키기 위해 추후 보완이 필요할 수 있습니다. 현재로서는 console.log를 사용해 직접 컴포넌트 리랜더링 여부를 확인하면서 학습을 진행해 주시길 권장합니다.

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