인프런 커뮤니티 질문&답변
작성한 질문수
10.3강 memo(Header) 리렌더링 질문
해결된 질문
작성
·
30
0
안녕하세요.
컴포넌트 최적화 하는 부분에서 질문있습니다.
10.3강에서 대략 5분 40초쯤에 Header 컴포넌트에 memo 기능을 사용해서 최적화 한 뒤에, 체크박스를 클릭하면서 헤더 컴포넌트가 리렌더링이 일어났는지에 대해 확인하는 부분이 있습니다.
질문사항은 memo 기능을 통해 최적화를 하던 안하던 개발자 도구에서 Header 컴포넌트가 항상 리렌더링이 일어나는것 같은데 어떻게된걸까요?
헤더부분이 계속 노란색으로 뜨면 리렌더링이 일어났다는걸로 보이는데 강의 영상에서도 다른 컴포넌트와 동일하게 노란색으로 변경됩니다.
강의에서 TodoItem을 커스텀한 부분은 강의대로 적용됐습니다.(이부분은 리렌더링이 발생하지 않습니다.)
답변 2
0
안녕하세요 이정환입니다.
음 아마 Context Provider 컴포넌트에서 리렌더링이 발생하는 것과 헷갈리시지 않았나 싶습니다
콘솔을 통해 더 정확히 확인해보시면 좋겠습니다!
만약 그랬는데도 문제가 발생하신다면 답글 남겨주세요
0
안녕하세요, 인프런 AI 인턴입니다.
wonjeong Lee님께서 질문하신 React.memo 기능의 동작 방식에 대한 이해가 필요한 것 같습니다. 강의에서 다루고 있는 컴포넌트 최적화와 관련된 내용을 살펴보겠습니다.
React.memo는 컴포넌트에 전달된 props가 변경되었을 때만 해당 컴포넌트를 리렌더링하도록 하는 최적화 기법입니다. 이를 통해 불필요한 리렌더링을 방지할 수 있습니다. 그러나 실제로 React.memo를 사용해도 기대와 달리 컴포넌트가 리렌더링되는 이유는 몇 가지 있을 수 있으니 살펴보겠습니다.
일부 변경된 props: Header 컴포넌트의 props 중 일부라도 변경된다면, 해당 컴포넌트는 리렌더링될 수 있습니다.
React.memo는 props의 얕은 비교만 수행하므로 배열이나 객체가 props로 전달될 경우 내부 값이 변경되어도 참조가 달라지기 때문에 리렌더링이 발생할 수 있습니다. 이는useCallback,useMemo등을 이용해 해결할 수 있습니다.콘솔이나 개발자 도구에서의 잘못된 해석: 개발자 도구는 가끔 prop 변화와 상관없이 시각적으로 변화를 보여줄 수 있는데, 이는 실제로 컴포넌트가 리렌더링되지 않았음에도 불구하고 시각적 표시만 달라질 수 있습니다. 이 때
console.log로 해당 컴포넌트의 렌더링 여부를 직접 확인하는 것도 방법입니다.
관련하여 추가로 참고할 수 있는 답변 링크를 드립니다:
- 리랜더링 highLight 질문..
- React.memo 메서드관련 질문드립니다.
위 질문과 답변이 wonjeong Lee님이 직면한 문제를 해결하는 데 도움이 되길 바랍니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
혹시 헷갈리실까봐
추가적으로 정보 남겨드립니다!
아래 그림과 같이 Header 컴포넌트에는 하이라이트가 안 들어가고 있습니다.
TodoEditor 컴포넌트와 App 그리고 TodoList, TodoItem 컴포넌트에만 하이라이트가 들어가고 있어요, Header 컴포넌트에 하이라이트가 들어간다면 날짜 아래에 새로운 경계선이 하나 더 보여야 합니다.
다음은 최적화 전 하이라이팅 화면입니다.
다음은 최적화 후의 하이라이팅 화면입니다