react 24

리액트 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