9장: JavaScript 라이브러리와 프레임워크 소개
JavaScript 라이브러리와 프레임워크는 개발자들이 더 효율적으로 코드를 작성하고 복잡한 애플리케이션을 쉽게 관리할 수 있도록 도와줍니다. 이 장에서는 jQuery와 React.js에 대해 소개하고, 기본 사용법을 알아보겠습니다.
#### jQuery
jQuery는 JavaScript의 기능을 단순화하고 크로스 브라우저 이슈를 해결하기 위해 만들어진 경량 JavaScript 라이브러리입니다. jQuery를 사용하면 DOM 조작, 이벤트 처리, 애니메이션, Ajax 요청 등을 쉽게 구현할 수 있습니다.
##### jQuery 기본 사용법
jQuery를 사용하려면 HTML 파일에 jQuery 라이브러리를 포함해야 합니다. CDN을 통해 쉽게 추가할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="content">
<p class="text">Hello, jQuery!</p>
<button id="changeText">텍스트 변경</button>
</div>
<script>
$(document).ready(function() {
$("#changeText").click(function() {
$(".text").text("텍스트가 변경되었습니다!");
});
});
</script>
</body>
</html>
위 예제에서 jQuery를 사용하여 문서가 로드된 후 버튼 클릭 이벤트를 처리하고, `p` 요소의 텍스트를 변경합니다.
##### jQuery 주요 메서드
- **요소 선택**: `$("selector")`
- **텍스트 변경**: `$(selector).text("new text")`
- **HTML 변경**: `$(selector).html("<b>new HTML</b>")`
- **클래스 추가/제거**: `$(selector).addClass("new-class")`, `$(selector).removeClass("old-class")`
- **AJAX 요청**: `$.ajax({ url: "url", method: "GET/POST", success: function(data) {} })`
#### React.js
React.js는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리입니다. 페이스북에서 개발되었으며, 컴포넌트 기반 아키텍처를 통해 복잡한 UI를 효율적으로 관리할 수 있습니다.
##### React.js 기본 사용법
React.js를 사용하려면 프로젝트를 생성하고 설정해야 합니다. Create React App을 사용하면 쉽게 시작할 수 있습니다.
1. Create React App 설치 및 프로젝트 생성:
npx create-react-app my-app
cd my-app
npm start
2. 기본 컴포넌트 작성:
// src/App.js
import React from 'react';
function App() {
return (
<div className="App">
<header className="App-header">
<h1>Hello, React!</h1>
</header>
</div>
);
}
export default App;
3. 컴포넌트 렌더링:
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
##### React.js 주요 개념
- **컴포넌트**: 재사용 가능한 UI 요소입니다. 함수형 컴포넌트와 클래스형 컴포넌트로 나눌 수 있습니다.
- **JSX**: JavaScript XML의 약자로, React 컴포넌트의 UI를 정의할 때 사용되는 문법입니다.
- **상태 (State)**: 컴포넌트의 상태를 관리하며, 상태가 변경되면 컴포넌트가 다시 렌더링됩니다.
- **속성 (Props)**: 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법입니다.
- **훅 (Hooks)**: 함수형 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있게 하는 기능입니다. 대표적으로 `useState`와 `useEffect`가 있습니다.
##### 상태 관리 예제
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>현재 카운트: {count}</p>
<button onClick={() => setCount(count + 1)}>증가</button>
</div>
);
}
export default Counter;
위 예제에서 `useState` 훅을 사용하여 `count` 상태를 관리하며, 버튼을 클릭할 때마다 `count`가 증가합니다.
이 장에서는 JavaScript 라이브러리와 프레임워크인 jQuery와 React.js에 대해 알아보았습니다. jQuery는 DOM 조작과 이벤트 처리에 유용하며, React.js는 컴포넌트 기반 아키텍처로 복잡한 UI를 효율적으로 관리할 수 있습니다. 다음 장에서는 간단한 웹 애플리케이션을 만들며 지금까지 배운 내용을 종합해 보겠습니다.
댓글
댓글 쓰기