FrontEnd30 jquery 사용하기 Jquery 사용하기 jquery는 가장 인기 있는 자바스크립트 라이브러리이다. 이벤트 처리, 애니메이션 등 자바스크립트의 기능을 간단하고 빠르게 구현할 수 있도록 지원해준다. jquery를 사용하기 위해서 cmd 창을 열어 client 폴더 경로로 이동한다. [npm install jquery]를 입력하면 npm이 jquery를 설치한다. 예제코드 App.js import React from 'react'; import './App.css'; import Jquery from './R016_Jquery'; function App() { return ( Start React 200! css 적용하기 ); } export default App; R016_Jquery.js import React,{Compo.. 2022. 6. 27. map()함수 사용하기 map()함수 사용하기 배열함수 map()은 forEach()와 마찬가지로 for문에서 사용하던 순번과 배열의 크기 변수를 사용하지 않는다. 차이점은 map()은 forEach()와 달리 return을 사용해 반환 값을 받을 수 있다는 것이다. 예제코드 App.js import React from 'react'; import './App.css'; import Map from './R015_Map'; function App() { return ( Start React 200! css 적용하기 ); } export default App; R015_Map.js import React, { Component } from "react"; class R015_Map extends Component { compon.. 2022. 6. 27. forEach() 함수 사용하기 forEach()함수 배열 함수 forEach()는 for문에서 사용하던 순번과 배열의 크기 변수를 사용하지 않는다. 배열의 처음부터 마지막 순번까지 모두 작업하는 경우 forEach()문을 사용하는 것이 간편하다. 하지만 특정 순번에서만 배열 값을 사용하거나 변경해야 하는 상황이라면 for문을 사용해야 한다. 예제코드 App.js import React from 'react'; import './App.css'; import ForEach from './R014_ForEach'; function App() { return ( Start React 200! css 적용하기 ); } export default App; R014_ForEach.js import React, {Component} from "r.. 2022. 6. 26. 화살표 함수 사용하기 화살표 함수(Arrow Function) ES6에서 등장한 화살표 함수는 ‘function’ 대신 ‘⇒’문자열을 사용하며 ‘return’문자열을 생략할 수도 있다. 따라서 기존 ES5 함수보다 가략하게 선언할 수 있다. 또 화살표 함수에서는 콜백 함수에서 this를 bind해야 하는 문제도 발생하지 않는다. 예제코드 App.js import React from 'react'; import './App.css'; import ArrowFunc from './R013_ArrowFunction'; function App() { return ( Start React 200! css 적용하기 ); } export default App; R013_ArrowFunction import React, { Componen.. 2022. 6. 26. 이전 1 ··· 3 4 5 6 7 8 다음
