리액트와 jQuery의 차이점

jQuery

웹사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈소스 기반의 자바스크립트 라이브러리
“write less, do more(적게 작성하고, 많은 것을 하자)”라는 모토로 개발됨

jQuery의 특징

• HTML/DOM 조작
• HTML 이벤트 메서드를 쉽게 사용
• 크로스 브라우징
• 네트워크, 애니메이션 등 다양한 기능을 제공
• 메서드 체이닝(Method chaining) 등 짧고 유지관리가 용이한 코드 작성을 지원
• 플러그인을 직접 구현하거나 확장

jQuery의 추락

jQuery는 다루기 까다로운 DOM API를 직관적으로 손쉽게 다룰 수 있는 모델을 제시했으나, 성능 최적화의 아쉬움과 개발 생산성의 문제가 있었다.

• 웹 표준 API의 확장 : 제이쿼리가 없어도 쉽게 사용 가능해진 웹 api
• 웹브라우저 환경의 변화 : 빨라진 자바스크립트 성능과 브라우저 호환성이 좋아짐
• 가상 돔(Virtual DOM)을 사용하는 라이브러리의 등장 : 성능적으로 개선된 방법인 가상돔을 사용하는 라이브러리 등장

 

---

React

Interactive UI elements를 구축하기 위해 페이스북에서 2011년에 만든 오픈소스 라이브러리.

React는 개발자가 DOM API를 다룰 필요가 없게 만들고, 상태(State)를 기반으로 DOM을 업데이트시킨다. 빠른 성능과 개발 생산성에도 효과적이라 대규모 애플리케이션 개발과 유지 관리에 더 적합하다.

React의 특징

• 컴포넌트 기반 아키텍처, UI 구성 요소를 쉽게 관리
• JSX를 사용하여 DOM을 조작할 수 있음
• Virtual DOM을 제공하여 웹사이트의 성능을 높임
• 라이브러리와 플러그인을 포함하여 강력하고 성장하는 에코시스템
• 다양한 개발 도구와 유틸리티를 제공
• 점점 더 커지고 있는 강력한 커뮤니티

 

---

리액트와 jQuery 비교

javascript의 브라우저 호환성이 충분히 좋아졌고 javascript의 지속적인 업데이트로 안정성이 높아지고 기능이 추가되면서 jQuery를 사용할 이유가 없어짐

리액트와 jQuery의 가장 중요한 차이는 가상돔 사용과 컴포넌트 기반 아키텍처

DOM 컨트롤

• React는 가상 DOM을 사용하여 실제 DOM 조작을 최소화하고 성능을 향상한다.
• jQuery는 우선 최초로 DOM을 찾으려면 document 에서부터 쭉 타고 내려오면서 찾아야 한다. 그러면 원하는 태그를 찾을 때까지 최상단 엘리먼트에서 트리 탐색을 하며 내려오니까 더 많은 검색이 발생한다. 실제 DOM을 직접 조작하므로 더 많은 DOM 조작이 필요한 등의 성능 저하가 발생

컴포넌트 기반 아키텍처

• React는 컴포넌트를 사용하여 UI를 작성하고 관리하며, 각 컴포넌트는 독립적으로 작동하며 재사용 가능하다. 이를 통해 코드 모듈화와 유지 보수를 용이하게 한다.
• jQuery는 이러한 컴포넌트 기반 아키텍처를 제공하지 않으며, 코드는 주로 이벤트 핸들러와 DOM 조작 함수로 이루어진다.