Hoonni
'React/ES6' 카테고리의 글 목록

React/ES6

React/ES6

React ES6 (5) - 비동기 함수, 디바운스 & 스로틀

비동기 함수 비동기 처리를 위해 사용함 비동기 처리란? 작업 시간이 긴 A를 처리하느라 다른 작업들이 대기하고 있다면 다른 작업들을 먼저 진행하고 작업 A와 A와 연관된 작업을 이후에 처리하는 방식 ex) 서버에 데이터를 요청하고 결과를 기다리는 과정 기존 자바스크립트의 비동기 함수 처리 지연 작업이 필요한 함수에 setTimeout() 함수를 이용했음 지연 작업이 완료되고나면 실행되어야 하는 함수는 지연 작업 함수의 인자인 콜백 함수로 전달하여 처리했음 예시 : function do1(a) { setTimeout(() => a('작업 A'), 100); } function do2(b) { setTimeout(() => b('작업 B'), 200); } function do3(c) { setTimeout..

React/ES6

React ES6 (4) - 배열 함수

배열 함수 기존 자바스크립트로 Query String을 문자를 기준으로 분리하여 객체에 담아 변환하는 사용 예제 : function func(a) { var queryString = a.substr(1); var divide = a.split('&'); var result = {}; for(var i = 0; i < divide.length; i++) { var part = divide[i].split('='); var key = part[0]; var val = part[1]; result[key] = val; } return result; }​ 결과 : └ 이 때, 3002, 25, 1997을 문자열로 분리한다. 3002, 25, 1997을 문자열이 아닌 숫자로 변환하기 function func(a)..

React/ES6

React ES6 (3) - 객체 확장 표현식, 구조 분해 할당, 라이브러리 의존성 관리

객체 확장 표현식 기존 자바스크립트의 객체 확장 표현식 : 기존 자바스크립트에서 객체와 객체의 값을 선언하기 위해 키 이름과 값을 각각 할당했음 var a = 1; var b = 2; var obj = { x: x, y: y }; // ⓐ var key = 'key'; var combine = {}; combine['one' + key] = 'val'; // ⓑ var obj2 = { // ⓒ x: x, A : function() { console.log('A'); }, B : function() { return 0; } };​ ┌ ⓐ : 키 이름과 키 값이 동일함 ├ ⓑ : 연산 결과로 키값을 대입할 때는 키값을 지정할 코드를 추가로 작성해야 함 └ ⓒ : 객체에 함수를 추가할 때는 변수에 함수를 할당..

React/ES6

React ES6 (2) - 클래스, 화살표 함수

클래스 기존 자바스크립트 문법은 클래스 표현식이 없어서 prototype으로 클래스를 표현하였음 ES6는 클래스를 정의하여 사용할 수 있음 기존 자바스크립트의 클래스 : 함수를 생성자 형태로 선언한 다음 상속이 필요한 변수나 함수를 prototype 객체에 할당하는 방법을 사용했음 prototype 객체는 new 연산자로 생성되는 객체 안에서 this 연산자의 함수 및 변수 선언 위치를 참조할 수 있는 요소임 예시 1 : function Shape (x, y) { this.name = 'Shape'; this.move(x, y); } // static 함수를 선언 Shape.create = function(x, y) { return new Shape(x, y); }; // 인스턴스 함수를 선언 Shape..

React/ES6

React ES6 (1) - 템플릿 문자열, 전개 연산자, 가변 변수 & 불변 변수

템플릿 문자열 JavaScript의 문자열 : var string1 ='안녕하세요' var string2 ='환영합니다' var welcome = string1 + ' ' + string2; // ⓐ var product = { name: '책', price: '5000원' }; var message = '제품' + product.name + '의 가격은' + product.price + '입니다'; // ⓑ var multiLine = '문자열1\n문자열2'; // ⓒ var value1 = 1; var value2 = 2; var boolValue = false; var operator1 = '곱셈값은 ' + (value1 * value2) + '입니다.'; // ⓓ var operator2 = '불..