react 16

리액트 ES6 문법 - 객체 확장 표현식과 구조 분해 할당

아래 책을 읽고 정리한 내용입니다. https://m.yes24.com/Goods/Detail/87631428 Do it! 리액트 프로그래밍 정석 - 예스24 실리콘밸리 리액트 클래스를 그대로 담았다!에어비앤비 프런트엔드 리드에게 배우는 리액트 프로그래밍!전 세계의 뛰어난 개발자들이 모여 일한다는 실리콘밸리! 실리콘밸리에서도 핫한 기업 m.yes24.com 객체 확장 표현식과 구조 분해 할당 ⇒ 객체나 배열의 특정값을 손쉽게 추출할 수 있는 표현식! ⇒ 배열이나 객체의 값을 해체하여 개별 변수에 할당하는 것 기존 자바스크립트의 객체 확장 표현식 사용 방법 알아보기 // ES5의 예 var x = 0; var y = 0; var obj = { x: x, y: y}; var randomKeyString = ..

React 2024.01.29

리액트 ES6 문법 - 화살표 함수

아래 책을 읽고 정리한 내용입니다. https://m.yes24.com/Goods/Detail/87631428 Do it! 리액트 프로그래밍 정석 - 예스24 실리콘밸리 리액트 클래스를 그대로 담았다!에어비앤비 프런트엔드 리드에게 배우는 리액트 프로그래밍!전 세계의 뛰어난 개발자들이 모여 일한다는 실리콘밸리! 실리콘밸리에서도 핫한 기업 m.yes24.com 화살표 함수 기본 자바스크립트의 함수 사용 방법 알아보기 function add(first, second) { return first + second; } // typeof add === 'function' var add = function(first, second) { return first + second; }; // typeof add === '..

React 2024.01.28

리액트 ES6 문법 - 클래스

아래 책을 읽고 정리한 내용입니다. https://m.yes24.com/Goods/Detail/87631428 Do it! 리액트 프로그래밍 정석 - 예스24 실리콘밸리 리액트 클래스를 그대로 담았다!에어비앤비 프런트엔드 리드에게 배우는 리액트 프로그래밍!전 세계의 뛰어난 개발자들이 모여 일한다는 실리콘밸리! 실리콘밸리에서도 핫한 기업 m.yes24.com 클래스 ⇒ 기존 자바스크립트 문법은 클래스 표현식이 없어서 prototype으로 클래스를 표현함 기본 자바스크립트의 클래스 표현 방법 알아보기 // ES5 문법 function Shape(x, y) { this.name = 'Shape'; this.move(x, y); } // static 타입 선언 예제 Shape.create = function(x..

React 2024.01.28

리액트 ES6 문법 - 가변 변수와 불변 변수

아래 책을 읽고 정리한 내용입니다. https://m.yes24.com/Goods/Detail/87631428 3. 가변 변수와 불변 변수 ⇒ 기본엔 변수 선언에 var를 사용했지만 ES6에서는 let, const를 사용한다. ES6의 가변 변수 사용 방법 알아보기 let num = 1; num = num * 3; let str = '문자'; str = '다른 문자'; let arr = []; arr = [1, 2, 3]; let obj = {}; obj = { name : '새 객체' }; let으로 선언한 변수는 읽거나 수정할 수 있다 ES6의 불변 변수 사용 방법 알아보기 const num = 1; num = 3; // 타입 에러가 발생합니다 const str = '문자'; str = '새 문자';..

React 2024.01.27

리액트 ES6 문법 - 전개 연산자

아래 책을 읽고 정리한 내용입니다. https://m.yes24.com/Goods/Detail/87631428 Do it! 리액트 프로그래밍 정석 - 예스24 실리콘밸리 리액트 클래스를 그대로 담았다!에어비앤비 프런트엔드 리드에게 배우는 리액트 프로그래밍!전 세계의 뛰어난 개발자들이 모여 일한다는 실리콘밸리! 실리콘밸리에서도 핫한 기업 m.yes24.com 전개 연산자 ⇒ 전개 연산자 사용 방법 배열이나 객체, 변수명 앞에 마침표 세 개(…)를 입력한다. 다만 배열, 객체, 함수 인자 표현식( [], {}, () )안에서만 사용해야 한다. ES6의 배열 전개 연산자 사용 방법 알아보기 // ES5 문법 var array1 = ['one', 'two']; var array2 = ['three', 'four..

React 2024.01.27

리액트 ES6 문법 - 템플릿 문자열

아래 책을 읽고 정리한 내용입니다. https://m.yes24.com/Goods/Detail/87631428 Do it! 리액트 프로그래밍 정석 - 예스24 실리콘밸리 리액트 클래스를 그대로 담았다!에어비앤비 프런트엔드 리드에게 배우는 리액트 프로그래밍!전 세계의 뛰어난 개발자들이 모여 일한다는 실리콘밸리! 실리콘밸리에서도 핫한 기업 m.yes24.com 템플릿 문자열 템플릿 문자열 사용 방법 - 템플릿 문자열은 문자열 안에 변수와 연산식을 혼합하여 사용한다. 기존 자바스크립트의 문자열 사용 방법 알아보기 // ES5 문법 var string1 = '안녕하세요'; var string2 = '반갑습니다'; var greeting = string1 + ' ' + string2; var product = {..

React 2024.01.27
728x90