react에서는 DOM을 직접 처리하지 않기 때문에 Jquery를 사용하지 않습니다. 하지만 jquery를 사용하던 프로그래머들이 jquery를 쓰려면 어떻게 해야 하는지 알고싶어하기 떄문에 사용법을 알아보도록 하겠습니다.
우선 jquery를 프로젝트에 추가해야 합니다.
프롬프트> npm i jquery |
그리고 jquery를 임포트하면 사용이 가능합니다.
import $ from 'jquery'
|
1. create-react-app를 이용하여 app006 프로젝트를 만듭니다.
| 1) 프로젝트 작성 D:\React> npx create-react-app app006 2) 폴더이동 D:\React> cd app006 3) jquery 설치 D:\React\app006> npm i jquery 4) visual code 실행 D:\React\app006> code . 5) public 폴더와 src폴더의 모든 파일을 삭제합니다. |
2. public 폴더에 다음과 같이 index.html파일을 생성합니다.
|
1
2
3
4
5
6
7
8
9
10
11
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React Component</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
|
3. src폴더에 UseJquery.js 파일을 다음과 같이 만듭니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
import $ from 'jquery'
const UseJquery = () => {
const showData = () =>{
let value = $("#data").val();
let content = `입력값 : ${value}`;
if(value.trim().length===0){
content = '입력된내용이 없습니다.';
}
alert(content);
$("#data").val("");
}
return(
<>
<input id="data" placeholder='문자열을 입력하게요' style={{fontSize:'12pt'}}/>{` `}
<button onClick={showData}>내용보기</button>
</>
)
}
export default UseJquery;
|
cs |
4. src폴더에 App.js 파일을 다음과 같이 만듭니다.
|
1
2
3
4
5
6
7
8
9
10
|
import UseJquery from "./UseJquery";
function App(){
return (
<>
<UseJquery/>
</>
);
}
export default App;
|
cs |
5. src폴더에 index.js 파일을 다음과 같이 만듭니다.
|
1
2
3
4
5
6
7
8
9
10
11
|
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.querySelector("#app"));
root.render(
<React.StrictMode>
<App/>
</React.StrictMode>
);
|
cs |
6. visual code에서 [새 터미널] 창을 열고 "npm start"명령으로 애플리케이션을 시작합니다.
실행 화면 입니다.
'Front End > React' 카테고리의 다른 글
| [React Exam 22] bootstrap icon 사용하기 (0) | 2024.10.21 |
|---|---|
| [React Exam 21] bootstrap 사용하기 (0) | 2024.10.21 |
| [React Exam 19] 스타일 추가하기 (0) | 2024.10.21 |
| [React Exam 18] 컴포넌트(Component)에 객체를 속성으로 전달하기 (0) | 2024.10.21 |
| [React Exam 17] 컴포넌트(Component)에 값을 속성으로 전달하기 (0) | 2024.10.21 |
