반응형
ES6 는 자바스크립트의 6 버전 이라고 대충 생각하시면 됩니다.
react 가 사용하고 있는게 ES6 죠.
아래는 많이 사용하고 있는 키워드 입니다.
- Classes
- Arrow Functions
- Variables (let, const, var)
- Class 간단 설명
일단 아래 정도만 알고 가죠. 주석 잘 보시고 이해하시면 됩니다.
<!DOCTYPE html>
<html>
<body>
<script>
// class 선언
class Car {
constructor(name) { // 생성자
this.brand = name; // 클래스 변수 선언
}
getCarInfo() { // 메소드
return 'made by ' + this.brand;
}
}
// 사용
mycar = new Car("BMW"); // 클래스 생성
document.write(mycar.brand); // 변수 사용 출력 : BMW
document.write(mycar.getCarInfo()); // 메소드 사용 출력 : made by BMW
// class 상속
class Driver extends Car { // Car 를 상속받음
constructor(name, gender){
super(name); // 부모class(=Car) 의 constructor 호출
this.gender = gender;
}
getDriverInfo(){
// 부모 class(=Car)의 변수나 메소드 사용 시 "this." 을 붙혀서 사용.
return "I am a " + this.gender + " and my car " + this.getCarInfo();
}
}
driver = new Driver("Benz", "Man"); // constructor의 파라메터는 2개.
document.write(driver.getDriverInfo()); // 출력 : I am a Man and my car made by Benz
</script>
</body>
</html>
- Arrow Functions
ES6 이전에는 아래와 같이 메소드를 정의했습니다.
var anon = function (a, b) { return a + b };ES6 부터는 아래와 같이 사용 가능합니다.
var anon = (a, b) => a + b;
선언과 사용법
hello = () => "Hello World!"; // 파라메터 없이.
hello2 = (val) => "Hello " + val; // 파라메터 존재.
document.write(hello()); // 출력 : Hello World!
document.write(hello2('bryan')); // 출력 : Hello bryan
- Variables (let, const, var)
var 는 계속해서 써왔던놈이죠.
function 밖에서 선언하면 전역변수가 되고
function 안에서 선언하면 function 안에서만 사용합니다.
그리고
for 같은 블럭 안에서 var 로 선언이 되면, 그 블럭을 벗어나게 되도 사용 가능합니다.
let 은 블럭내에서만 유효합니다.
const 또한 블럭내에서 유효하고 이 값은 바꿀수 없습니다.
[React 따라하기 #1] React 개발에 필요한 도구 설치
[React 따라하기 #2] React 시작하기 hello world!
[React 따라하기 #3] Codepen에서 실행해보기
[React 따라하기 #4] ES6, js Class 에 대한 간단한 설명
[React 따라하기 #6] React Components(컴포넌트)
[React 따라하기 #7] React Components(컴포넌트) 참조하기
[React 따라하기 #10] React 기본 함수 (life cycle)
[React 따라하기 #11] React Event 리액트 이벤트
728x90
반응형
'React,Node,JQuery,js' 카테고리의 다른 글
| [React 따라하기 #6] React Components(컴포넌트) (0) | 2019.12.30 |
|---|---|
| [React 따라하기 #5] React JSX (470) | 2019.12.30 |
| [React 따라하기 #3] Codepen에서 실행해보기 (0) | 2019.12.30 |
| [React 따라하기 #2] React 시작하기 hello world! (0) | 2019.12.30 |
| Codepen 에서 react 개발 설정하기 (0) | 2019.12.27 |
댓글