React ES6

화살표 함수

화살표 함수를 사용하면 더 짧은 함수 구문을 작성할 수 있다.

예제 before

class Car {
  constructor(name) {
    this.brand = name;
  }
}

예제 with 화살표 함수

hello = () => {
  return "Hello World!";
}

예제 with 함수 기본값 반환 값

hello = () => "Hello World!";

예제 with 매개변수를 사용한 함수

hello = (val) => "Hello " + val;

예제 with 괄호가 없는 함수

hello = val => "Hello " + val;

this?

this의 취급은 일반 함수와 비교하여 화살표 함수에서도 차이가 있다.

요컨대, 화살표 함수에서는 this의 결합이 없다.

정규 함수에서 this 키워드는 함수를 호출하는 객체를 나타내는데, 윈도우, 문서, 버튼 등이 될 수 있다.

화살표 함수의 경우 this 키워드는 항상 화살표 함수를 정의한 개체를 나타낸다.

그 차이를 이해하기 위해 두 가지 예를 살펴보자.

두 예 모두 처음에는 페이지가 로드될 때, 그리고 사용자가 버튼을 클릭할 때 다시 한 번 메소드를 두 번 호출한다.

첫 번째 예는 정규 함수를 사용하고, 두 번째 예는 화살표 함수를 사용한다.

결과는 첫 번째 예제가 두 개의 다른 개체(창과 단추)를 반환하고 두 번째 예제는 Header 개체를 두 번 반환함을 보여준다.

예제 1

정칙 함수를 사용하면, this는 함수를 호출한 객체를 나타낸다.

class Header {
  constructor() {
    this.color = "Red";
  }

//Regular function:
  changeColor = function() {
    document.getElementById("demo").innerHTML += this;
  }
}

const 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);

예제 2

화살표 함수로, this는 누가 함수를 호출했든 간에 헤더 객체를 나타낸다.

class Header {
  constructor() {
    this.color = "Red";
  }

//Arrow function:
  changeColor = () => {
    document.getElementById("demo").innerHTML += this;
  }
}

const 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);

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기