jquery 사용하기

Jquery 사용하기

jquery는 가장 인기 있는 자바스크립트 라이브러리이다. 이벤트 처리, 애니메이션 등 자바스크립트의 기능을 간단하고 빠르게 구현할 수 있도록 지원해준다.

jquery를 사용하기 위해서 cmd 창을 열어 client 폴더 경로로 이동한다. [npm install jquery]를 입력하면 npm이 jquery를 설치한다.

 

예제코드

App.js

import React from 'react';
import './App.css';
import Jquery from './R016_Jquery';

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <p>css 적용하기</p>
      <Jquery/>
    </div>
  );
}

export default App;

R016_Jquery.js

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

class R016_Jquery extends Component{

  input_alert = (e) => {
    var input_val = $('#inputId').val();
    alert(input_val);
  }

  render() {
    return(
      <div>
        <h2>[THIS IS Jquery]</h2>
        <input id="inputId" name="inputName"/>
        <button id="buttonId" onClick={e => this.input_alert(e)}>
          Jquery Button</button>
      </div>
    )
  }
}

export default R016_Jquery;

코드 해설

Line2

• jquery를 import해 $ 기호를 선언한다. 이는 jquery를 사용할 때 $기호를 붙여 사용해야 한다는 것을 의미한다.

Line 15

• 화면의 왼쪽에 보이는 버튼으로, 값을 입력하면 <input> 태그의 value 값으로 저장된다.

Line 16~17

• button을 클릭하면 input_alert라는 함수를 호출한다.
• 함수가 호출되면 jquery 문법 $(’#inputId’)로, id 값이 inputId인 <input> 태그에 접근한다.
• <input> 태그의 value값(line 15에서 입력한 값)을 가져와 input_val 변수에 저장한다.
• 변수값을 팝업창으로 표시한다.

실행결과