AI 요약관련 정보

• 리액트 렌더링은 Trigger, Render, Commit 세 단계로 이루어지며, props/state 변경 또는 부모 컴포넌트 렌더링 시 Trigger됩니다. 🔄
• 리액트 렌더링과 브라우저 렌더링은 모두 브라우저의 메인 스레드에서 처리되며, 60fps 유지를 위해 16ms 이내 완료되어야 합니다. ⏱️
• 16ms 초과 시 프레임 드랍, 사용자 이벤트 처리 지연 등 성능 문제가 발생하여 사용자 경험 저하 및 이탈로 이어집니다. 📉
• 렌더링 최적화는 Trigger 단계에서 불필요한 렌더링을 막고, Render 단계에서 불필요한 계산을 최소화하는 두 가지 접근 방식이 있습니다. 🛠️
• Trigger 단계 최적화는 컴포넌트 구조를 개선하여 상태를 사용하는 컴포넌트와 그렇지 않은 컴포넌트를 분리함으로써 불필요한 리렌더링을 방지합니다. 🏗️
• Render 단계 최적화는 불필요한 함수 재실행, 재생성, 컴포넌트 리렌더링을 useCallback, useMemo, memo와 같은 React API를 활용하여 최소화합니다. 🚀
• 피드줍줍 사례 연구에서 초기에는 무한 스크롤 시 모든 컴포넌트가 리렌더링되는 문제가 있었습니다. 🐛
• 첫 번째 최적화로 feedbacks 상태를 하위 컴포넌트(UserFeedbackList)로 내려 구조를 개선하여 렌더링 범위를 좁혔습니다. ⬇️
• 구조 개선 후에도 기존 피드백이 불필요하게 리렌더링되는 문제가 남아있어 memo를 적용했으나, props로 전달된 배열(customCSS)이 매번 새로 생성되어 memo가 제대로 작동하지 않았습니다. 💡
• 디버깅을 통해 customCSS prop의 문제점을 파악하고, isHighlighted와 같은 불리언 값으로 변경하여 memo가 효과적으로 작동하도록 수정했습니다. ✅
• 최적화 결과, 새로 가져오는 피드백만 렌더링되고 메인 스레드의 작업량이 크게 줄어들어 프레임 드랍이 개선되었습니다. ✨
• 가장 중요한 것은 디버깅을 통해 렌더링의 올바른 원인을 찾아내는 것입니다. 🔍