React - 화살표함수

기존 JS 함수 사용방법

// 일반적인 함수 사용
function add(first, second) {
	return first + second;
}

// 익명함수 사용
var add = function(first, second) {
	return first + second;
}

화살표 함수 (arrow function)

화살표함수는 ES6에 추가된 표현식을 사용하는 함수로, 화살표 기호 =>로 함수를 선언한다.

익명함수를 선언하여 변수에 대입하는 방법과 유사하다.
다른점은 function 키워드를 생략하고 인자 블록 (()) 과, 본문 블록 ({}) 사이에 => 를 표기한다는 것이 있다.

var add = (first, second) => {
	return first + second;
}

var add = (first, second) => first + second;
//본문 블럭이 비어있고, 결과 값을 바로 반환하는 경우 => 뒤에 반환 식을 넣을 수 있다.

var addAndMultiple = (first, second) => ({ add: first + second, multiply: first * second})
//반환 값이 객체라면 괄호로 결괏값을 감싸 간결하게 표현 가능하다.

화살표 함수는 함수 표현식을 간결히 할 수 있다.

function addNumber(num) {
	return function(value){
    return num + value;
    };
}
// 계단형 함수 선언

var addNumber = num => value => num + value;
// 화살표 함수를 사용한 경우

화살표 함수는 콜백 함수의 this 범위로 생기는 오류를 피하기 위해 bind() 함수를 사용하여 this 객체를 전달하는 과정을 포함한다.

class Myclass {
	value = 10;
    constructor() {
    var addThis2 = function(first, second){
    	return this.value + first + second;
        }.bind(this);
        var addThis3 = (first, second) => this.value + first + second;
        }
}
// addThis2() 함수는 this를 bind() 함수에 전달하여 this의 범위를 유지한다.
// addThis3() 함수는 화살표 함수이므로 이러한 과정이 생략되어 있다.