1. ES6 소개
- ES6는 ECMAScript 6를 나타낸다.
- React는 ES6를 사용하며 다음과 같은 몇 가지 기능에 학습해야 한다.
- 클래스
- Arrow Functions
- 변수 (let, const, var)
2. Class
- 클래스는 함수의 한 유형이지만 function 키워드 대신 class를 사용하고
속성은 constructor() 메서드 내부에 할당된다.
class Car {
// 생성자
constructor(name)
{
this.brand = name;
}
// 메서드
print()
{
return 'I have a ' + this.brand;
}
}- 상속은 아래와 같이 extends 키워드를 사용한다.
class Car {
// 생성자
constructor(name)
{
this.brand = name;
}
// 메서드
print()
{
return 'I have a ' + this.brand;
}
}
class Model extends Car {
constructor(name, mod)
{
super(name);
this.model = mod;
}
show()
{
return this.print() + ', it is a ' + this.model;
}
}
var mycar = new Model("Ford", "Mustang");
mycar.show();
3. Arrow Functions
- ES6에 도입된 기능.
- 더 짧은 함수 구문을 사용할 수 있다.
hello = () => {
return "Hello World";
}- Arrow Function 은 기본적으로 값을 반환하기에 아래와 같이 사용할 수 있다.
hello = () => "Hello World!";- 매개 변수가 있을 때
hello = (value) => "Hello " + value;
-
this의 사용
- 일반 함수와 Arrow Func 은 this의 사용이 다르다.
- 일반 함수에서는 this 키워드는 함수를 호출 한 객체를 나타내며 창, 문서, 버튼 등이 될 수 있다.
- Arrow Func에서 this 키워드는 항상 Arrow Func을 정의한 개체를 나타낸다.-
일반 함수, 두 개의 다른 개체 (창과 단추)를 반환하는 예
-
<!DOCTYPE html>
<html>
<body>
<h1>Regular Function</h1>
<button id="btn">Click Me!</button>
<p><strong>this</strong> represents:</p>
<p id="demo"></p>
<script>
class Header {
constructor() {
this.color = "Red";
}
changeColor = function () {
document.getElementById("demo").innerHTML += this;
}
}
myheader = new Header();
//The window object calls the function:
window.addEventListener("load", myheader.changeColor);
//A button object calls the function:
document.getElementById("btn").addEventListener("click", myheader.changeColor);
</script>
</body>
</html>-
this 호출과는 관계없이 Header 개체를 반환하는 예
<!DOCTYPE html>
<html>
<body>
<h1>Arrow Function</h1>
<button id="btn">Click Me!</button>
<p><strong>this</strong> represents:</p>
<p id="demo"></p>
<script>
class Header {
constructor() {
this.color = "Red";
}
changeColor = () => {
document.getElementById("demo").innerHTML += this;
}
}
myheader = new Header();
//The window object calls the function:
window.addEventListener("load", myheader.changeColor);
//A button object calls the function:
document.getElementById("btn").addEventListener("click", myheader.changeColor);
</script>
</body>
</html>
4. 변수
- ES6 이전에는 var 키워드를 이용해 변수를 정의하는 방법이 하나뿐이었다.
- ES6 에서는 var, let, const 로 변수를 정의할 수 있다.
-
var
- 외부에서 사용하는 경우 전역 범위
- 내부에서 사용하는 경우 해당 함수에 속한다.
-
let
- 블록 범위(지역 변수), 보통 loop에서 사용
for(let item of lists)
{
// to do
}-
const
- 생성된 후 그 값이 절대 변하지 않는 변수.
'Language > React.js' 카테고리의 다른 글
| [React] React State (0) | 2021.01.24 |
|---|---|
| [React] 컴포넌트 Prop (0) | 2021.01.24 |
| [React] React 컴포넌트 (0) | 2021.01.24 |
| [React] React JSX (0) | 2021.01.23 |
| [React] React의 개요 (0) | 2021.01.23 |