[React] React에서 jquery 쓰기

직접 DOM을 조작할 수 없다
그러므로 useEffect를 쓰거나 state를 사용해야 한다
classList.add가 아니라 state 변수와 갱신 함수이용

출처: https://yeolceo.tistory.com/66

import './App.css';


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

class App extends React.Component {


  componentDidMount() {
    $(".target").mousedown(function () {      //마우스 누를떼
      console.log('누름');
    });
    $("button").mouseup(function () {       //마우스 누를뗄떼
     console.log('뗌!');
    });
  }

  render(){
    return (
      <div className="App">
        <button className="target">버튼</button>
      </div>
    );
  }
}

export default App;

먼저 class를 통해 보여드리고 function 형태로도 보여드리겠습니다.

npm으로 추가한 jQuery를 사용해주시고 렌더링을 위해 componentDidMount()에 감싸주었습니다.

useEffect와 useState를 활용하여 버튼을 눌렀다 뗄 때 표현되는 text가 변경되도록 코드를 넣었습니다.

import './App.css';
import {useEffect, useState} from 'react';
import $ from "jquery";

const App=()=>{

const [text, setText] = useState('올해가 끝났습니다.');
useEffect(()=>{
$(".target").mousedown(function () {
setText('나이 한살 추가요')
});
$("button").mouseup(function () {
setText('올해가 끝났습니다.')
});

console.log('changed');

}, []);

return (

<div className="App">
  <button className="target">버튼</button>
  <div>{text}</div>
</div>

);
}

export default App;