JQuery란 무엇일까? 개념 및 사용하는 방법

 

 

 

JQuery가 뭔지 다 까먹은 나란 사람...

다시 복습드갑니다 ~! 

 

JQuery란?

웹페이지를 조작하기 위해 설계된 자바스크립트 라이브러리입니다.

빠르고, 크기도 작으며 기능이 많아 여러곳에서 사용되고 있습니다.

jQuery는 DOM 요소의 선택, 조작, 이벤트 처리, 애니메이션 및 Ajax 통신을 간단하게 만들어 줍니다.

"이 Ajax통신을 간단하게 해줘야 한다는게 제일 좋은 것 같네용?"

 

하지만

JQuery는 크롬 같은 브라우저들이 생겨나면서 React, Vue.js등의 등장으로 그 인기가 예전만큼은 아닙니다.

"하지만 JQuery로 만들어진 사이트들이 많기 때문에 유지보수 등의 이유로 알고 있어야 한다고 생각이 드네요."

 

 

 

예를 들어 id가 example인 div태그의 텍스트를 "안녕하세요"로 변경하는 작업을 JavaScript, JQuery, React로

비교해서 보여드리겠습니다.

 

 

JavaScript vs JQuery vs React

 

 

JavaScript를 사용했을 때

document.getElementById("example").textContent = "안녕하세요!";

 

장점

1. 범용성: 모든 웹브라우저에서 기본적으로 지원합니다. 별도의 라이브러리나 프레임워크를 추가하지 않아도 작동합니다.

2. 기본 기술: 웹 개발에 있어서 근본이 되는 기술이기 때문에 JavaScript를 이해하는 것은 모든 라이브러리의 기본입니다.

3. 유연성: 웹 애플리케이션의 어느 부분에서든 사용할 수 있으며, 프론트엔드와 백엔드 모두에서 사용이 가능합니다.

 

단점

1. 복잡성: 대규모 애플리케이션에서 DOM을 직접 조작하거나 상태를 관리하는 것은 복잡하고 오류가 발생하기 쉽습니다.

2. 브라우저 호환성: 다양한 브라우저(크롬, 익스플로어 )에서 동일한 코드가 다르게 작동할 수 있습니다.

 

 

JQuery를 사용했을 때

$("#example").text("안녕하세요!");

 

장점

1. 간결성: 코드를 간결하게 작성할 수 있으며, DOM 조작과 이벤트 처리를 쉽게 할 수 있습니다.

2. 브라우저 호환성: 다양한 브라우저 간의 호환성 문제를 내부적으로 처리해줍니다. (최신 브라우저 제외)

3. 풍부한 플러그인: 다양한 기능을 추가할 수 있는 풍부한 플러그인 생태계를 가지고 있습니다.

 

단점

1. 성능: 순수 JavaScript에 비해 성능이 떨어질 수 있습니다. 특히 앱 환경에서는 성능차이가 심합니다.

2.  필요성 감소: 최신 브라우저의 발전과 순수 자바스크립트의 개선으로 인해 JQuery의 필요성이 예전만큼 크지 않게 되었습니다.

 

 

React를 사용했을 때

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

function ExampleComponent() {
  const [message, setMessage] = useState('');

  return (
    <div>
      <div id="example">{message}</div>
      <button onClick={() => setMessage('안녕하세요!')}>클릭</button>
    </div>
  );
}

ReactDOM.render(<ExampleComponent />, document.getElementById('root'));

 

장점

1. 컴포넌트 기반 구조: 재사용 가능한 컴포넌트를 사용하여 유지보수가 쉽고, 대규모 애플리케이션을 효율적으로 구성할 수 있습니다.

2. 가상 DOM: 실제 DOM에 비해 변경사항을 효율적으로 처리하여 성능을 개선합니다.

3. 강력한 커뮤니티와 생태계: 다양한 라이브러리, 도구, 그리고 커뮤니티의 지원을 받을 수 있습니다.

 

단점

1. 학습 곡선: React 자체보다는 React생태계 내 다양한 개념과 도구들을 학습하는 데 있어 시간이 필요합니다.

2. 보일러플레이트와 설정: 프로젝트를 시작하기 위해 필요한 초기 설정이나 반복적인 코드가 많을 수 있습니다.