[React] 화살표함수와 this의 관계

화살표 함수의 장점은 함수를 정의하는 영역의 this를 그대로 전달 받을 수 있다는 것입니다.

우선 아래 3가지 형식으로 같은 값을 출력하는 식을 보겠습니다.

//1. 전통적인 JS 함수 형식
const test1 = function(a,b){
	return a+b;
}

//2. 화살표 함수 형식
const test2 = (a,b) => {
	return a+b;
}

//3. 리턴문만 작성한 경우 화살표 함수를 아래처럼 더 압축할 수 있다.
const test3 = (a,b) => a+b;

이 3가지 형식은 모두 동일하게 변환되지만

1, 2 함수 형식은 서로 다른 this 값이 바인딩 될 수 있습니다.

특히 함수가 중첩되었을때는 this 로 인해 문제가발생합니다.

 

this 기본 규칙 :

기본적으로 this는 메서드나 함수가 호출될 때 호출중인 메서드를 보유한 객체가 this로 연결되는데

만약 메서드를 보유한 객체가 없다면 전역객체가 연결됩니다.

 

이해를 더 잘 하기 위해 console 창을 열고 아래의 코드를 입력해보았습니다.

var obj = {result : 0};
obj.add = function(x,y){
	this.result = x+y;
}
obj.add(3,4)
console.log(obj)

obj.add 가 호출되었을 때 이 메서드를 보유한 객체는 obj이기 때문에 3행의 this = obj가 되는 것입니다.

따라서 obj.result = x + y = 3 + 4 = 7 이 됩니다!

 

하지만 이 함수를 다른 객체의 메서드 형태로 호출하면 그 값이 달라지는데

다시 console 창을 열고 아래의 코드를 입력해봅시다.

var obj = {result : 0};
obj.add = function(x,y){
	this.result = x+y;
}
var add2 = obj.add;
console.log(add2 === obj.add);
add2(3,4)
console.log(obj)
console.log(result)

console.log 는 순서대로 

위와 같은 값을 찍어낼 것입니다..

 

obj.add 를 add2에 할당한 순간 add의 메서드 메모리 주소가 add2로 복사되는 것인데

이에 따라서 obj.add = add2가 성립되는 것입니다.

이것때문에 add2(3,4)를 호출하면 obj 가 아닌 전역변수 result 에 7이 할당됩니다.

 

그래서 자바스크립트에서는 직접 연결할 this를 지정할 수 있는 기능을 제공합니다!