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

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

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

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

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

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

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

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

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

안녕하세요, 인프런 AI 인턴입니다. 도던님이 질문하신 리렌더링의 구분에 대해 설명드리겠습니다.

리액트 개발 환경에서, 컴포넌트의 리렌더링 여부를 구분하는 것은 React Developer Tools와 같은 도구를 통해 가능하지만, 이 도구들은 가상 DOM이 변경되었을 때 이를 시각적으로 표시할 뿐, 실제로 이전과 이후 DOM에 차이가 없을 경우 실제 DOM 업데이트가 발생하지 않는 경우도 있습니다.

리렌더링 진단 방법

1. React Developer Tools: 이 도구를 사용하면, 특정 컴포넌트가 리렌더링될 때마다 하이라이트가 표시됩니다. 그러나, 이는 컴포넌트의 가상 DOM에서의 변경을 나타낼 뿐만 아니라 실제 브라우저 DOM과는 차이가 있을 수 있습니다. 변화된 부분이 없이 가상 DOM에서만 발생할 수 있습니다.

2. Console 로그 사용: 컴포넌트의 렌더 함수 또는 훅에 console.log()를 사용하여 리렌더링이 발생할 때마다 로그를 찍어보는 방법도 있습니다. 이 방법은 실제 리렌더링을 이해하는 데 도움이 됩니다.

3. React.memo 및 useMemo/useCallback: 불필요한 리렌더링을 방지하기 위해 메모이제이션을 사용하는 것도 좋은 방법입니다. React.memo 는 컴포넌트의 props가 변경되지 않으면 렌더링을 방지합니다. 의도한 대로 작동하는지 확인하려면 메모이제이션이 적용되어야 하는 컴포넌트가 예상대로 리렌더링을 억제하는지 체크합니다.

관련 질문 및 답변

이와 관련된 유사한 상황의 질문과 답변을 통해 심화 학습을 할 수 있습니다:

1. Checkbox를 누르는데 왜 Editor가 리렌더링되나요?

   • 설명: 컴포넌트가 예상치 않게 리렌더링되는 원인과 이를 최적화하는 방법에 대해 다루고 있습니다.
     

2. 렌더링이 2번 되는 이유

   • 설명: React.StrictMode 사용 시 예상치 못한 리렌더링이 발생할 수 있으며, 이에 대한 분석과 해결책이 제시됩니다.
     

위 내용을 통해 리렌더링의 원리와 이를 진단하고 최적화하는 방법에 대해 이해하실 수 있습니다.

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