[javascript] 익명 함수와 콜백 함수를 사용하는 자바스크립트 라이브러리 및 프레임워크 사용 예시

15 Dec 2023

javascript

자바스크립트 라이브러리와 프레임워크는 익명 함수와 콜백 함수를 효과적으로 활용하여 비동기적인 작업을 처리하고 코드의 모듈성을 강화하는 등의 다양한 기능을 제공합니다. 다음은 익명 함수와 콜백 함수를 사용하여 자바스크립트 라이브러리 또는 프레임워크에서 일반적으로 하는 것에 대한 몇 가지 예시입니다.

1. jQuery

// 클릭 이벤트에 익명 함수 사용
$('#myButton').on('click', function() {
  // 클릭 이벤트 발생 시 실행되는 코드
});

// AJAX 요청과 콜백 함수 사용
$.ajax({
  url: 'example.com/api/data',
  method: 'GET',
  success: function(response) {
    // AJAX 요청이 성공하면 실행되는 코드
  },
  error: function(xhr, status, error) {
    // AJAX 요청이 실패하면 실행되는 코드
  }
});

2. React

// JSX 안에서 익명 함수 사용
<button onClick={() => { /* 클릭 이벤트 발생 시 실행되는 코드 */ }}>Click me</button>

// 콜백 함수를 props로 전달하여 사용
function ParentComponent() {
  return (
    <ChildComponent onEvent={() => { /* 콜백 함수로 전달된 코드 */ }} />
  );
}

3. Node.js

// 파일 시스템 모듈을 이용한 콜백 함수 사용
const fs = require('fs');
fs.readFile('file.txt', 'utf8', function(err, data) {
  if (err) {
    // 파일 읽기 실패 시 실행되는 코드
  } else {
    // 파일 읽기 성공 시 실행되는 코드
  }
});

// HTTP 서버 구축과 콜백 함수 사용
const http = require('http');
http.createServer(function(req, res) {
  // HTTP 요청에 대한 응답과 관련된 코드
}).listen(8080);

이러한 예시에서 볼 수 있듯이, 익명 함수와 콜백 함수는 자바스크립트 라이브러리와 프레임워크에서 매우 중요한 역할을 하며, 비동기적인 작업을 수행하고 코드를 모듈화하는 데 큰 도움을 줍니다.

참고 문헌