[React] jQuery 사용 방법

 

 

이번 글에서는 React에서 jQuery를 사용하는 방법에 대해서 알아보도록 하겠습니다.

jQuery는 가장 인기 있는 자바스크립트 라이브러리인데요.

이벤트 처리, 애니메이션 등 자바스크립트의 기능을 간단하고 빠르게 구현할 수 있도록 지원해주고 있습니다.

이러한 jQuery를 React에서 사용하려면 어떻게 해야되는 지 알아보도록 하겠습니다.

 

---

1. CMD창을 열어 해당 프로젝트 경로로 이동해서 [npm install jquery]를 입력합니다.

 

---

2. jquery를 임포트해줍니다.

import $ from 'jquery';

 

이러면 세팅이 끝나 제이쿼리 사용이 가능합니다.

아주 간단하죠?

 

---

확인해봅시다.

다음은 h2 태그를 클릭하면 알림창이 나오는 예제입니다.

import React, { Component } from 'react';
import $ from 'jquery';

class EsComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    componentDidMount() {
        $('h2').on('click', () => {
            alert('타이틀 부분을 클릭하셨습니다.');
        })
    }

    render() {
        return(
            <h2>EsComponent sub-page</h2>
        );
    }
}

export { EsComponent };

 

h2태그 부분을 클릭하니 알림창이 정상적으로 나오는 것을 확인할 수 있습니다.