기존에 있는 애플리케이션을 react로 고치는 작업이라 주라 사용해본 적 없는 문법들을 볼 때가 많다.
jquery도 들어보기만 했지 써본 적은 거의 없는데 만들어진 코드를 react로 재정비해야 해서 구글링을 해봤다.
jquery 기본 문법
출처: https://velog.io/@nittre/JQuery-%EB%AC%B8%EB%B2%95%EB%93%A4
jquery는 빠르고 작고 기능이 많은 js 라이브러리
다양 브라우저에서 동작하는 쉬운 api
html 문서에 대한 순회 및 조작 등을 더 간단하게 만든다
1) DOM 순회 및 조작
$('tagName.className').바꿀 것();
2) 이벤트 핸들링
#button container에 해당되는 button을 클릭했을 때 css의 display:none으로 숨겨진
var hiddenBox = $('#banner-message') $('#button-container button').on('click', function(event){ hiddenBox.show; });
3)ajax
Ajax는 비동기 자바스크립트와 XML(Asynchronous JavaScript And XML)을 의미한다.
서버와 통신하기 위해 XMLHttpRequest 객체를 사용하며, JSON, XML, HTML, 일반 텍스트형식 등 다양한 포맷을 주고받을 수 있다.
Ajax의 가장 강력한 특징은 페이지 전체를 리프레쉬 하지 않고서도 수행되는 비동기성이다. 이러한 비동기성을 통해 클라이언트의 이벤트가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있게 해준다
'서버의 /api/getWeather에 있는 로컬 스크립트를 쿼리 파라미터 zipcode=97201과 함께 호출하고, #weather-temp의 HTML을 리턴된 값으로 교체하기.
$.ajax({
url: "/api/getWeather",
data: {
zipcode: 97201,
},
success: function (result) {
$("#weather-temp").html("<strong>" + result + "</strong> degress");
},//성공하면 weather-temp id를 가진 것의 html을 위와 같이 바꿔준다
});
})jQuery.ready(callbackF)
document가 준비되면 파라미터의 콜백함수를 실행한다.
//`$(document)`라는 HTML이 전부 로딩되면 파라미터 안에 있는 함수가 실행된다.
$(document).ready(function () {
bingo.init();
});prepend(content[, content])
- parameter: 삽입하고자 하는 content
- jQuery 컬렉션의 각 요소의 맨 앞에 content를 삽입한다.
<h2>Greetings</h2>
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>$(".inner").prepend("
Test
");<h2>Greetings</h2>
<div class="container">
<div class="inner">
<p>Test</p>
Hello
</div>
<div class="inner">
<p>Test</p>
Goodbye
</div>
</div>기존에 있는 요소를 인자로 넘길 수 있다.
$(".container").prepend($("h2"));<div class="container">
<h2>Greetings</h2>
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>jQuery.get()
jQuery.get(url[, data][, success][, dataType])
parameters
url: 리퀘스트가 보내질 URL
data: 리퀘스트와 함께 보내질 객체나 문자열
success: 리퀘스트를 성공하면 실행되는 콜백 함수. dataType이 제공된 경우 필요하지만, 콜백함수 대신 null이나 jQuery.noop을 사용할 수 있다.
dataType: 서버에서 예상되는 데이터 유형. 기본값: 지능형 추측(xml, json, script, text, html)
//jQuery.get() 예제
$.get("test.php", { name: "John", time: "2pm" }, function (data) {
alert("Data Loaded: " + data);
});
jQuery.get([settings])
parameters
settings: Ajax 리퀘스트를 구성하는 키값 쌍의 집합. url은 필수값이며, 그 외 모든 속성은 옵션이다. .ajax({
url: url,
data: data,
success: success,
dataType: dataType,
});
jQuery.post()
jQuery.post(url[, data][, success][, dataType])
parameters
url: 리퀘스트가 보내질 URL
data: 리퀘스트와 함께 보내질 객체나 문자열
success: 리퀘스트를 성공하면 실행되는 콜백 함수. dataType이 제공된 경우 필요하지만, 콜백함수 대신 null이나 jQuery.noop을 사용할 수 있다.
dataType: 서버에서 예상되는 데이터 유형. 기본값: 지능형 추측(xml, json, script, text, html)
//jQuery.post() 예제
$.post("test.php", { name: "John", time: "2pm" }, function (data) {
alert("Data Loaded: " + data);
});
jQuery.post([settings])
parameters
settings: Ajax 리퀘스트를 구성하는 키값 쌍의 집합. url은 필수값이며, 그 외 모든 속성은 옵션이다. .ajax({
type: "POST",
url: url,
data: data,
success: success,
dataType: dataType,
});
jQuery.noop()
jQuery.noop()은 빈 함수이다. 아무것도 하지 않는 함수를 넘기길 원하는 경우 jQuery.noop()을 사용할 수 있다.
콜백함수가 옵션으로 들어가는 메서드에서 유용하게 쓸 수 있다.
