jQuery
jquery가 붐이 였던 이유는 2006년에는 js가 안예쁘고 브라우저 호환성도어려웟다 간단하게 말하자면 제이쿼리가 좋은 라이브러리이기보다는 임시방편으로 사용했던 것이다.
제이쿼리는 그당시에 DOM을 쉽게다를수 있고, 오류안나고, 브라우저 걱정안해도되고, 코드도 이뻣다
그러면서 연관된 유료/무료 라이브러리가 생기게 되었고, ajax로 비동기호출이 편리해졋다.
하지만 현재는 js가 제이쿼리가생겻던 원인들을 다 보완하였다 코드도 이뻐지게 되엇고 크로스 브라우징 이슈도 적어졌고,제이쿼리는 기존코드를 래핑해서 새롭게 만든 패키지로 래필리 지나치게 많고 무겁다.
현재 버츄얼 돔의 인기로 리얼돔을 직접 조작할 필요가 없어졋고 대부분 기능은 바닐라js나 ts등으로 똑같이 구현할 수 있다.
제이쿼리를 바닐라js로 옮기게 된 이유
직접적인 DOM 조작 최소화
DOM 조작은 비교적 비용이 많이 드는 작업입니다. DOM을 변경할 때마다 브라우저는 렌더 트리를 다시 계산하고, 레이아웃을 재조정하며, 화면에 다시 그려야 합니다. 이러한 과정은 리플로우(reflow)와 리페인트(repaint)를 발생시키며, 특히 많은 요소를 자주 변경할 경우 성능 저하가 심해질 수 있습니다.
렌더링 엔진이 이를 처리하느라 성능이 떨어질 수 있습니다.
바닐라 JavaScript를 사용하면 직접적인 DOM 조작을 최소화하고, 더 나은 구조화와 분리된 로직을 유지할 수 있습니다. 이는 코드의 유지보수성과 테스트 용이성을 향상시킵니다.
반복적인 DOM 접근,불필요한 재계산
메모리차지(무겁다)
- 기본적인 jQuery 파일의 크기가 크기 때문에 모바일 네트워크(특히 3G나 느린 네트워크)에서 로딩 속도가 느려질 수 있습니다.
- $를 쓰는게 메모리와 CPU를 잡아먹습니다. 그리고 jQuery.data같은 함수는 DOM에 직접 읽고 쓰는 기능을 제공하는데, 덕분에 속도면에서도 느리고 변수를 Global에 노출시키게 됩니다.
- 리액트가 초기 메모리 사용량에서는 더 클 수 있지만, 복잡한 애플리케이션의 경우 더 나은 성능과 관리 용이성을 제공합니다. 모바일 환경에서도 올바르게 최적화하면 리액트의 장점을 충분히 활용할 수 있습니다. 반면, jQuery는 단순한 작업이나 작은 프로젝트에서 유리할 수 있지만, 복잡한 애플리케이션에서는 성능과 유지보수 측면에서 한계가 있을 수 있습니다.
속도저하
jQuery는 비교적 무거운 라이브러리로, 특히 저사양 모바일 기기에서는 성능 저하를 초래할 수 있습니다. DOM 조작과 애니메이션이 많은 페이지에서는 이 문제가 더 두드러집니다.
모바일에서의 문제점
아직 모바일에서는 사용해본적이 없지만 jQuery는 기본적으로 터치 이벤트를 완벽하게 지원하지 않으며, 데스크탑 환경의 마우스 이벤트 중심으로 설계되었습니다. 이를 해결하기 위해 jQuery Mobile 등의 플러그인이 있지만, 이는 추가적인 파일 로드와 복잡성을 초래합니다 모바일 기기는 데스크탑에 비해 메모리가 제한적이므로, jQuery의 메모리 사용량이 문제가 될 수 있습니다. 이는 특히 오래된 모바일 기기에서 문제가 될 수 있습니다.
의존성
브라우저 버전에 따라 jQuery의 일부 기능이 제한될 수 있으므로, 목표하는 브라우저 환경에 맞는 jQuery 버전을 선택하는 것이 중요합니다.
jQuery와 함께 사용되는 다른 라이브러리나 프레임워크도 jQuery 버전에 의존할 수 있습니다. 이 경우
기존 코드를 업데이트할 때 종속성 문제를 야기할 수 있습니다.
DOM은 테그들로 트리구조로 뼈대를 만들고
랜더링은 살이 붙이는 과정이라고 할수 있다.
리액트는 버츄얼 돔이라는 가상돔이 있는데 이 가상돔이 상태가 바뀐애들을 기억하고 있다가 한번에 반영을 시켜줌
그래서 리액트는 제이쿼리보다 랜더링이 빠르고 DOM조작비용을 줄이고 불필요한 재계산을 줄일수 잇다.
