리렌더링 구분
리렌더링이 되고 있다고 설명하는 화면
리렌더링이 발생하지 않는다는 화면
제가 보엔 둘 다 하이라이팅이 되고 있는 것 같은데 어느 부분을 봐야 리렌더링이 안된다고 느낄 수 있을까요??
답변 2
1
안녕하세요 이정환입니다.
다음은 10.3 챕터 강의의 2분 4초경에 확인하는 리렌더링 하이라이트입니다.
자세히 보시면 헤더 컴포넌트의 영역에 하이라이트가 들어오고 있는걸 보실 수 있습니다.
헷갈리신다면 별도로 빨간펜으로 칠해 다시 보여드릴게요
이렇게 "오늘은" 이라는 텍스트 부터 "Sun Feb 04 2024" 텍스트 아래 까지 하나의 박스 형태로
Header 컴포넌트가 하이라이트 되고 있는걸 확인하실 수 있습니다.
다음은 React.memo 적용 후 Header 컴포넌트가 리렌더링 되지 않는다는 것을 확인하고 있는 화면입니다. 강의중 5분 26초 경을 보시면 됩니다.
보시면 위 화면에서는 Sun Feb 04 2024 글자 아래에 경계선이 사라져있습니다. 이를 통해 Header 컴포넌트에는 하이라이팅이 발생하지 않는걸 볼 수 있습니다.
0
안녕하세요, 인프런 AI 인턴입니다. 도던님이 질문하신 리렌더링의 구분에 대해 설명드리겠습니다.
리액트 개발 환경에서, 컴포넌트의 리렌더링 여부를 구분하는 것은 React Developer Tools와 같은 도구를 통해 가능하지만, 이 도구들은 가상 DOM이 변경되었을 때 이를 시각적으로 표시할 뿐, 실제로 이전과 이후 DOM에 차이가 없을 경우 실제 DOM 업데이트가 발생하지 않는 경우도 있습니다.
리렌더링 진단 방법
React Developer Tools: 이 도구를 사용하면, 특정 컴포넌트가 리렌더링될 때마다 하이라이트가 표시됩니다. 그러나, 이는 컴포넌트의 가상 DOM에서의 변경을 나타낼 뿐만 아니라 실제 브라우저 DOM과는 차이가 있을 수 있습니다. 변화된 부분이 없이 가상 DOM에서만 발생할 수 있습니다.
Console 로그 사용: 컴포넌트의 렌더 함수 또는 훅에
console.log()를 사용하여 리렌더링이 발생할 때마다 로그를 찍어보는 방법도 있습니다. 이 방법은 실제 리렌더링을 이해하는 데 도움이 됩니다.React.memo 및 useMemo/useCallback: 불필요한 리렌더링을 방지하기 위해 메모이제이션을 사용하는 것도 좋은 방법입니다.
React.memo는 컴포넌트의 props가 변경되지 않으면 렌더링을 방지합니다. 의도한 대로 작동하는지 확인하려면 메모이제이션이 적용되어야 하는 컴포넌트가 예상대로 리렌더링을 억제하는지 체크합니다.
관련 질문 및 답변
이와 관련된 유사한 상황의 질문과 답변을 통해 심화 학습을 할 수 있습니다:
Checkbox를 누르는데 왜 Editor가 리렌더링되나요?
- 설명: 컴포넌트가 예상치 않게 리렌더링되는 원인과 이를 최적화하는 방법에 대해 다루고 있습니다.
- 설명: 컴포넌트가 예상치 않게 리렌더링되는 원인과 이를 최적화하는 방법에 대해 다루고 있습니다.
-
- 설명: React.StrictMode 사용 시 예상치 못한 리렌더링이 발생할 수 있으며, 이에 대한 분석과 해결책이 제시됩니다.
- 설명: React.StrictMode 사용 시 예상치 못한 리렌더링이 발생할 수 있으며, 이에 대한 분석과 해결책이 제시됩니다.
위 내용을 통해 리렌더링의 원리와 이를 진단하고 최적화하는 방법에 대해 이해하실 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
useEffect와 lifecycle문의
0
16
1
프론트엔드 학습 수준 문의
0
27
2
리액트 챕터별 코드에서 eslint 설정파일이 없어요
0
42
2
데이터 로딩중 화면만 계속 나와요!!
0
51
2
퍼블리셔일경우 어느정도 수준까지 강의를 들어야할까요
0
76
2
이후의 커리큘럼 문의
0
101
2
실슬환경 설정에서 save후 console.log 부분이 새로고침이 안되는현상입니다.
0
49
2
최적화 관련 질문있습니다 (useMemo 등)
0
82
3
프로바이더 컴포넌트의 위치는 어떤 기준인가요?
1
79
3
Date 객체에 관련하여 질문드립니다.
0
82
2
리액트 개정판 교재 질문
0
58
2
예제코드가 안나와요!
0
75
2
select a variant 선택에서 javascript와 javascript+react compiler 중 무엇을 선택해야하나요? com
0
104
2
onMouseEnter 관련 문의 드립니다
0
89
3
배열의 렌더링 관련 질문 드립니다.
0
70
2
2:40초 refObj를 콘솔로 출력시 오류가 발생합니다.
0
111
2
TS, 리액트 강의중에 뭘 먼저 수강하는게 좋을까요?
0
131
2
useCallback 적용한 onCreate, onUpdate, onDelete 함수..
0
66
1
vs code 자동완성관련 문의
0
107
2
91강 useEffect내에서 상태변화함수 호출시 발생하는 에러
1
174
2
87강 필터 함수 질문
0
65
2
useRef, useState count 비교
0
64
2
안된다고했던 이유가 무엇이었는지 모르겠습니다
0
86
2
85강에서 객체를 왜 클래스로 만들어서 new 하지 않는건지 궁금합니다.
0
73
2