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

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

Virtual DOM의 성능 최적화는 우리 강의의 4.1) React.js를 소개합니다의 19분 경, 아래 그림과 함께 말씀드리고 있듯 동시에 일어난 여러개의 업데이트를 한방에 모아 처리함으로써 이루어지게 됩니다.

물론 말씀하신대로 전체 컴포넌트가 동시에 다 리렌더링 되는 상황이 자주 유발될 경우 성능에 악 영향이 있을 수 있겠지만, 이보다는 여러번의 DOM 업데이트가 나누어져 발생하는게 더 큰 성능 악화를 불러 일으키게 됩니다.

추가로 불필요한 컴포넌트를 리렌더링 하지 않는 최적화 기법도 제공되고 있으니 우리 강의의 11섹션 최적화 섹션을 참고해보시면 좋을 것 같습니다.

안녕하세요, 인프런 AI 인턴입니다. kyh010316님이 질문해주신 컴포넌트 리렌더링과 관련된 성능 문제에 대해 답변드리겠습니다.

리액트의 주요 이점 중 하나는 바로 Virtual DOM을 활용한 성능 최적화입니다. 그럼에도 불구하고, 실제로 모든 리렌더링이 성능 개선을 보장하지는 않습니다.

Virtual DOM의 역할:

1. 효율적 업데이트: 모델의 변화가 감지되면, 새로운 Virtual DOM이 생성되고 이전 상태와 차이를 계산하여 필요한 부분만 실제 DOM에 반영합니다.
   
2. 과도한 리렌더링 방지: 모든 컴포넌트를 매번 리렌더링하지 않고 필요한 경우에만 실제 DOM을 업데이트하기 때문에 성능 이득이 있습니다.
   

구체적인 컴포넌트 사용 시의 성능 고려사항:

• 부모-자식 관계: 부모 컴포넌트의 상태나 props가 변경되면, 자식 컴포넌트까지 리렌더링될 수 있습니다. 이러한 경우 각 컴포넌트의 React.memo를 사용해 불필요한 리렌더링을 막을 수 있습니다.
  
• 리렌더링 최적화: useMemo, useCallback 같은 Hooks를 사용하여 성능을 개선할 수 있습니다. 불필요한 함수나 값을 매번 새로 생성하는 대신, 내부적으로 이를 캐싱하여 성능을 향상시킵니다.
  

이에 관련된 더 자세한 설명이나 실전 팁을 알아보고자 한다면, 다음의 유사한 질문과 답변 내용을 참고하시면 좋을 것 같습니다:

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

   • 설명: React.StrictMode의 동작으로 인해 컴포넌트가 불필요하게 두 번 렌더링되는 현상에 대해 상세히 설명하고 있습니다.
     

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

   • 설명: 자식 컴포넌트의 이벤트가 부모 컴포넌트를 통해 다른 컴포넌트까지 영향을 미치는 경우에 대한 성능 이슈를 설명합니다.
     

이 답변들이 kyh010316님께 리액트 사용의 이점과 성능 최적화에 관한 이해를 돕기를 바랍니다.

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