도니 House 도니 House

React 렌더링Activity 컴포넌트를 이해하기 전에 먼저 React에서 상태 업데이트가 어떻게 이루어지고 왜 리렌더링이 발생하는지 이해할 필요가 있다.React 공식 문서에서는 Activity가 hidden 상태일 때 렌더링을 수행하지 않는다고 설명하고 있기 때문에, 이를 이해하기 위해 먼저 React의 기본 렌더링 과정을 살펴보았다.예를 들어 다음과 같은 코드가 있다고 하자.function App() {const [count, setCount] = useState(0);return ( setCount(count + 1)}>클릭);}버튼을 클릭하면 setCount가 호출되고 React는 다음과 같은 과정을 통해 UI를 업데이트한다.setState↓updateQueue에 update 추가↓render..

⚠️ 문제 상황 부트캠프 프로젝트에서 습관 형성을 돕는 히트맵 기반 챌린지 UI를 구현하던 중, 사용자가 여러 챌린지를 비교하며 확인할 수 있도록 Swiper를 활용한 슬라이드 구조를 적용했다.하지만 실제로 UI를 사용해보는 과정에서 슬라이드를 전환할 때마다 이미지가 반복적으로 렌더링되며 화면 전환 시 버벅임이 발생하는 문제를 확인했다.React DevTools를 통해 분석한 결과, Swiper 슬라이드 이동 시 각 이미지 컴포넌트가 불필요하게 재렌더링되고 있었다.→ 이는 사용자 입장에서 UI 반응성이 떨어지고, 체감 성능이 저하되는 문제로 이어질거라고 예상이 되어 빠른 처리가 필요해보였다 🔍 원인 분석프로젝트를 구현하면서 렌더링 최적화에 대해서 고민을 하던 중, Swiper.js의 slideItem..