[React] jQuery 사용하기

1. 사전 준비

[MacOS] React 설치 하기

$ npm install jquery

// 또는

$ yarn add jquery

 

src/App.js

를 아래와 같이 작성해 줍니다.

import React from "react";

import MainComponent from "./JQuery";

function App() {
  return (
    <div>
      <h1>jQuery</h1>
        <MainComponent />
    </div>
  );
}

export default App;

 

src/JQuery.js

를 아래와 같이 작성해 줍니다.

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

class JQuery extends Component {
    input_alert = (e) => {
        const input_val = $('#inputId').val();
        alert(input_val);
    }

    render() {
        return (
            <div>
                <input id="inputId" name="inputName" />
                <button
                    id="buttonId"
                    onClick={e => this.input_alert(e)}
                >
                    Button
                </button>
            </div>
        );
    }
}

export default JQuery;

 

결과 화면