안녕하세요. 원더제이입니다.
이번 포스팅에서는 리액트 프로젝트를 만드는게 아닌 화면단위에서 리액트와 jQuery를 사용해보려고 합니다.
리액트는 대부분 create-react-app으로 프로젝트를 만들어서 사용합니다.
하지만 이미 만들어놓은 화면들을 리액트로 다시 다 만들기는 어렵겠죠.
리액트의 JSX 문법을 통해 html과 javascript를 한 번에 사용하는 방식으로 간단하게 실습해보도록 하겠습니다.
기본적인 javascript와 jquery, react 사용법을 알고계셔야 이해하기가 쉽습니다.
# 화면파일 구성
리액트 공식 사이트 설치하기의 하단 로컬 환경에서 React 시도하기 내용에 추가로 jquery 3버전을 포함하였습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function MyApp() {
return <h1>Hello, world!</h1>;
}
const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<MyApp />);
</script>
</body>
</html>
위의 내용을 index.html로 저장하고 실행해봅니다.
브라우저에 Hello, world!가 나타난다면 잘 저장된 것입니다.
# 리액트에서 jQuery 라이브러리 사용해보기
포스팅에서 적는 방식을 사용해서 화면 작업을 하면, 리액트에서 jQuery로 된 외부 라이브러리(ex. DatePicker)들이 잘 작동할까? 라는 생각이 들게 됩니다. 왜냐하면 리액트에서는 대부분 리액트에 맞는 라이브러리들이 만들어져 있고, npm을 통해 추가해서 사용하는 방법이 일반적이니까요.
하지만 이번 포스팅에서는 npm을 사용하지 않습니다. 그러니 리액트에 맞게 만들어진 라이브러리들은 사용할 수 없는거죠.
아주아주 단순한 작업만 가능할겁니다.........만, 저처럼 새로운걸 배워서 써먹어 보고 싶다는 사람에게는 나쁘지 않은 실습 기회가 될거라 생각합니다.
대표적인 jQuery DatePicker 테스트를 위해 jQuery-ui를 스크립트에 추가해보도록 하겠습니다.
<!-- jQuery UI 추가 -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.14.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.14.1/jquery-ui.js"></script>
이어서 구현되는 모습을 확인하기 위해 화면 관련 부분을 작성합니다.
<script type="text/babel">
const {useEffect} = React;
function MyApp() {
//React에서 화면이 그려질때
useEffect(() => {
console.log('effect!');
}, []);
return (
<>
<h1>Hello, world!</h1>
클릭: <input type="text" id="date-input" />
</>
);
}
const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<MyApp />);
</script>
클릭 옆의 입력창을 선택하면 아직 아무 반응이 없습니다. 당연하겠죠? 아무런 작업을 하지 않았으니까요.
이제 입력창을 누르면 달력이 나타나도록 useEffect 안에 작성해보겠습니다.
useEffect(() => {
console.log('effect!');
$('#date-input').datepicker({
'dateFormat': 'yy-mm-dd'
});
}, []);
입력창을 선택하면 달력이 나타나고, 내용을 누르면 yyyy-MM-dd 형식으로 입력되는 DatePicker가 구현됐네요!
# useState로 변경되는 데이터 표시하기
useEffect에서 jquery선택자에 datepicker를 연결하고, 달력 선택시 값이 입력되는걸 확인했습니다.
입력된 값이 Hello, world! 자리에 들어가게 하려면 어떻게 해야 할까요?
주로 jQuery로 화면 작업을 진행했다면 아래처럼 소스를 작성할 것입니다.
$('#date-input').datepicker({
'dateFormat': 'yy-mm-dd',
'onSelect': function(value) {
$('h1').val(value);
},
});
하지만 위 소스처럼 작업하게되면, 화면에 변경된 사항이 반영되지 않습니다. 리액트 JSX 안에서 화면의 내용을 변경하려 했기 때문이죠.
리액트에서 값의 변화는 기본적으로 useState를 통해 가능합니다. 그러니 jquery의 .val()이 아닌 useState로 관리되어야 합니다.
아래처럼 MyApp의 내용을 수정합니다.
function MyApp() {
const [date, setDate] = useState('Hello, world!'); //Hello world를 기본 세팅
//React에서 화면이 그려질때
useEffect(() => {
console.log('effect!');
$('#date-input').datepicker({
'dateFormat': 'yy-mm-dd',
'onSelect': function(value) {
setDate(value); //선택한 값을 date에 세팅
},
});
}, []);
return (
<>
<h1>{date}</h1> <!-- date의 내용을 출력 -->
클릭: <input type="text" id="date-input" />
</>
);
}
아래는 전체 소스입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- jQuery UI 추가 -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.14.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.14.1/jquery-ui.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const {useEffect, useState} = React;
function MyApp() {
const [date, setDate] = useState('Hello, world!'); //Hello world를 기본 세팅
//React에서 화면이 그려질때
useEffect(() => {
console.log('effect!');
$('#date-input').datepicker({
'dateFormat': 'yy-mm-dd',
'onSelect': function(value) {
setDate(value); //선택한 값을 date에 세팅
},
});
}, []);
return (
<>
<h1>{date}</h1> <!-- date의 내용을 출력 -->
클릭: <input type="text" id="date-input" />
</>
);
}
const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<MyApp />);
</script>
</body>
</html># 마무리
이번 포스팅에서는 짧게 리액트와 jQuery를 섞어 사용해보는 방법을 실습해봤습니다.
화면을 개발하는 방법에 이런 방식도 있구나 ~ 하는 정도로만 짧게 경험해보시는걸 추천드립니다.
둘 중 어떤것이 더 나은지와 또 다른 조합 방법을 찾아 고민해보시는 것도 하나의 재미가 될거라 생각합니다.
'개발' 카테고리의 다른 글
| 다시 정리해보는 REST API (0) | 2022.09.13 |
|---|
댓글