[리액트 React] 리액트에서 제이쿼리 사용하기 / jquery in react

안녕하세요.

디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다.

 

리액트를 공부하려고 책을 사서 보는데 클래스형 컴포넌트로만 작성되어 있더라고요.

그래서 제가 함수형 컴포넌트를 사용해서 새롭게 작성해보려고 합니다.

즉, 여기에 있는 내용이 제 머릿속에서 나온 것이기 때문에 '정석'은 아닙니다.

다만 구현은 확실히 됩니다.

 

저는 제이쿼리에 익숙한 주니어 개발자이기 때문에.. 꼭 필요한 과정이었어요.

저처럼 제이쿼리를 더 친숙하게 느끼시는 분들은 아래 순서대로 진행하신 다음에 편하게 리액트 작업하세요 :)

 

 

1. cmd 창을 열어서 해당 명령어를 입력한다.

vscode에서는 '컨트롤 + ` '를 눌러서 TERMINAL창을 열어 입력해 주세요.

npm install jquery

 

 

 

2. App.js 적용하기

import React from 'react';
import './App.css'
import Jquery from './UseJquery.js';

function App() {
	return(
		<div>
			<Jquery />
		</div>
	)
}

export default App;

 

 

 

 

3-1. 클래스형 컴포넌트 버전 UseJquery.js 작성

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

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

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

export default UseJquery;

 

 

 

3-2. 함수형 컴포넌트 버전 UseJquery.js 작성

this에 유의해 주세요!

import React from 'react';
import $ from 'jquery';

function UseJquery() {

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

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

export default UseJquery;

 

 

4. 완성된 모습

input 안에 텍스트를 입력하고 'Jquery Button'을 누르면 alert으로 입력한 텍스트가 보여집니다.