리액트 5

화살표함수, 클래스, 객체확장표현식

//클래스 // ES5 문법 function Shape(x, y) { this.name = "Shape"; this.move(x, y); } // static 타입 선언 예제 Shape.create = function (x, y) { return new Shape(x, y); }; //인스턴스 함수를 선언하는 예제 Shape.prototype.move = function (x, y) { this.x = x; this.y = y; }; Shape.prototype.area = function () { return 0; }; // 혹은 Shape.prototype = { move: function (x, y) { this.x = x; this.y = y; }, area: function () { return..

리액트/ES6 2021.07.31

객체 전개 연산자 / 가변, 불변변수

//객체 전개 연산자 // ES5 예제 var objectOne = { one: 1, two: 2, other: 0 }; var objectTwo = { three: 3, four: 4, other: -1 }; var combined = { one: objectOne.one, two: objectOne.two, three: objectTwo.three, four: objectTwo.four, }; //객체 내장함수 assing() 첫 번째 인자는 결과로 반환할 객체({}) , 나머지 인자는 병합할 객체이다. //이때 병합할 객체는 앞에 있는 객체부터 덮어 쓴다. objectTwo의 값으로 덮어 쓴다. var combined = Object.assign({}, objectOne, objectTwo); //..

리액트/ES6 2021.07.30

전개연산자(Spread Operator)

//전개 연산자. (spread operator) //전개 연산자는 나열형 자료를 추출하거나 연결 할 때 사용. //사용방법은 배열이나 객체, 변수명 앞에 마침표 3개를 입력. (...) //대신 배열 객체 암수 인자 표현식 ( [], {}, () ) 안에서만 사용해야 한다. // ES5 문법 var array1 = ["one", "two"]; var array2 = ["three", "four"]; var combined = [array1[0], array1[1], array2[0], array2[1]]; var combined = array1.concat(array2); var combined = [].concat(array1, array2); //concat()함수로 두 배열 합치기 var firs..

리액트/ES6 2021.07.29

템플릿 문자열

//템플릿 문자열 //작은따옴표 ' ' 대신 (`) 백틱으로 문자열을 표현한다. 숫자 1 왼쪽에 있음. //또한 템플릿 문자열에 특수 기호 $를 사용하여 변수 또는 식을 포함할 수 있다. let string1 = "안녕하세요"; let string2 = "반갑습니다"; let greeting = string1 + " " + string2; //ES5문법 let greeting = `${string1} ${string2}`; //ES6문법 console.log(greeting); let product = { name: "도서", price: "4200원" }; let message = "제품" + product.name + "의 가격은" + product.price + "입니다"; //ES5문법 let m..

리액트/ES6 2021.07.29