Why?
앞선 포스트를 살펴봤듯이 react의 렌더링 로직은 각각의 분리된 기능 덕분에 이미 충분히 빠르다. 대부분의 서비스는 최적화를 깊이 고려하지 않아도 문제없이 잘 작동한다.
하지만 렌더링 최적화의 필요성은 웹 애플리케이션의 복잡성이 증가하면서 중요한 문제로 대두되었다. 초기에는 웹 페이지가 단순한 정적 콘텐츠를 표시하는 데 사용되었지만, 웹 애플리케이션은 점차 복잡한 상호작용과 다양한 기능을 포함하게 되었다. 이러한 기능이 추가될수록 화면을 렌더링하는 과정은 속도가 느려질 수 있다.
이러한 웹 애플리케이션의 배경에는 브라우저와 대량의 데이터가 있다.
브라우저의 발전
현재와 미래의 웹 서비스에서도 웹 브라우저의 지속적인 발전은 계속될 것으로 예상된다. 이러한 브라우저의 발전은 웹 애플리케이션의 복잡성과 사용자 요구사항의 증가를 반영하며, 결과적으로 렌더링 최적화가 더욱 필수적인 과제로 부각되고 있다.
-
기술적 발전과 UI/UX
브라우저는 웹 표준과 기술을 계속 발전시켜 왔다. 새로운 HTML, CSS, JavaScript 기능과 API가 추가되며, 이로써 더 다양하고 동적인 웹 애플리케이션을 개발할 수 있게 되었다. 다양한 컴포넌트와 화면 전환, 상태 변경 등의 동작이 늘어났지만, 이러한 기능들은 렌더링과 성능에 더 큰 부담을 줄 수 있다. 때문에 react에서는 리렌더링 최적화를 통해 효율적으로 화면을 업데이트할 필요가 있다. -
다양한 디바이스와 환경
기술의 발전으로 다양한 디바이스와 환경에서 웹 애플리케이션을 사용할 수 있도록 해주었다. 다양한 디바이스에서도 높은 성능과 일관된 사용자 경험을 제공을 해야 하며, 이에 따라 반응형 디자인과 모바일 최적화가 중요해졌다. -
모바일 최적화와 PWA
브라우저의 발전으로 프로그레시브 웹 앱(PWA)이 부상하고 있다. PWA는 오프라인에서도 작동하며 뛰어난 성능을 제공해야 한다. 모바일 환경에서는 배터리 수명과 데이터 사용량을 최소화해야 하는데, 이를 위해서도 불필요한 리렌더링을 방지하는 react 렌더링 최적화가 필수적이다.
대량의 데이터
-
데이터 시각화
몇몇 앱에서는 데이터 시각화와 상호작용을 위한 다양한 방법을 통해 제공한다. 지도에서의 마커와 같은 대량의 데이터를 처리하거나 복잡한 인터랙션을 제공하는 경우 최적화 과정을 거치지 않으면 성능 이슈가 발생할 수 있다.예를 들어, 지도에 수많은 마커가 있다고 가정하자. 이와 관련없는 네비게이션 메뉴의 hover 액션이 발생했 때, 따로 최적화를 하지 않았다면 수많은 마커들은 불필요한 리렌더링이 일어날 수 있다. 이는 성능 저하와 유저의 불편함으로 이어진다. 이에 따라 렌더링 최적화는 데이터 시각화 및 인터랙션의 원활한 구현을 위해 필수적이다.
-
인피니티 스크롤과 페이지네이션
대량의 데이터를 화면에 모두 렌더링하려면 많은 자원이 필요하다. 보통의 개발에서 대량의 데이터를 렌더링할 때는 무한스크롤 혹은 페이지네이션을 활용한다. 이를 통해 초기 로딩 속도를 개선하고 성능을 향상시킬 수 있다.
이러한 두가지 요소들을 바탕으로 react 웹 애플리케이션을 개발할 때는 최적화 로직을 초기부터 미리 적용하는 것이 좋다. 서비스의 성장에 치명적이고 돌이킬 수 없는 성능 문제를 사전에 예방할 수 있으며, 팀원간 부적절한 설계를 방지하고 코드의 퀄리티를 확보할 수 있기 때문이다. 또한 초기부터 최적화를 고려하면 코드베이스가 점차 커져도 향후 유지보수가 매우 용이해진다는 점도 있다.
