함수.prototype.bind(값) vs ()⇒{함수(값)} (+this와 화살표함수)

🍋 공부 배경

---

다른 분의 리액트 코드를 읽던 중, 상태값과 세터함수를 프롭으로 받아오는 코드를 짠다고 했을 때, 화살표 함수로 값을 바인딩 시키는 (2)번 코드와 동일하게 작동하는 (1) 번 코드를 발견했다.

function 컴포넌트({name, setName}){
	return <button onclick={setName.bind(null, "송강")}></button>
} // -- (1)

function 컴포넌트({name, setName}){
	return <button onclick={()=>{setName("송강")}}></button>
} // --- (2)

스택오버플로우 질문들을 보니 꽤나 6-7년도 전에 흔하게 쓰던 코드였고 화살표 함수가 등장한 지금, 빈번히 사용되지 않는 것 같지만…

두 코드가 대체 왜 동일한 것인지 이해하는 과정에서 조각조각 흩어져있던 this-bind 개념들이 한데로 모이는 경험을 했다.

this, 화살표 함수, bind(call, apply)에 대한 개념이 명확하지 않다면 하단 ‘🍋 this 란?’ 섹션부터 읽어보길 바란다.

 

 

🍋 코드 설명

---

onClick 이벤트에 전달하는 이벤트 핸들러 함수는 일반 함수로써 this 값에는 window 객체가 할당된다.

<button
      onClick={function () {
        console.log(this); // Window 객체
      }}
    ></button>

useState (구조 참고) 역시 상태값과 일반 세터 함수를 반환하는 코드가 내부적으로 구현되어있기에 this값으로 window 객체가 바인딩 된 상태일 것이다.

하지만... 계속 풀리지 않는 의문점…

메서드에 다른 객체를 고정시켜주고 싶을 때 bind를 사용하고 일반함수는 엄격모드일 때 undefined로 아무런 객체가 바인딩 되지 않을 텐데, 왜 하필 null을 바인딩 시켜주는 걸까? 

그에 대한 답변은 “꼭 null일 필요가 없다”이다.

var fn = function (a, b) {
  console.log(a, b);
};

var f1 = fn.bind(null, 'x', 'y');
var f2 = fn.bind({random:"랜덤 객체"}, 'x', 'y');

f1(); // x y
f2(); // x y

위 예제처럼 this를 내부적으로 사용하지 않는 함수의 경우 어떠한 객체를 바인딩 시켜주던 동일한 결과를 얻게된다.

이 코드에서 bind가 사용된 초점은 “새로운 함수를 반환”하고, “항상 같은 인자를 넘겨주도록”하도록 하는 데에 있다.

이 맥락에서 보았을 때, 항상 같은 결과, 즉 setName 세터 함수가 name 상태값을 “송강”으로 업데이트시켜주는 결과를 실행해주면 되는 코드로서 (1), (2)가 사용되었다고 보여진다.

 

 

🍋 허무하지만 그래도 한 줄 의견

---

뒤에 이어질 내용들을 공부한 후, 이해한 코드를 바탕으로 생긴 한 줄 의견으로,

(1)번보다 (2)번이 더 좋은 코드인 것 같다.

위 코드에선 단순히 “HOC 함수를 사용해 이후 인자들을 넘기기 위한 용도”로 사용되었다.

하지만 bind를 사용할 때 개발자들이 기대하는 부분은 바로, 객체가 “메서드”로서 바인딩되어야 하는 경우라고 생각하기 때문이다.

 

 

🍋 this 란?

---

객체에 저장된 정보를 접근할 수 있게 해주는 다리라고 생각한다.

this는 런타임에 결정되고 실행되는 콘텍스트에 따라 할당되는 값이 달라진다.

따라서 동작 방식을 잘 이해해야 실수를 피하고 효과를 쏙쏙 뽑아 사용할 수 있다.

아래 예제처럼 비 엄격 모드에서는 전역 스코프의 main 함수를 호출한 객체는 window 객체가 할당되고, 엄격 모드에서는 undefined이 할당된다.

main() 함수를 호출한 this값은, 이 메서드를 호출한 객체인 ‘요니’가 된다.

이렇듯 함수를 직접적으로 호출한 객체가 바로 this이고, 스코프에 따라 바인딩되는 this가 달라질 수 있음. (이로 인해 발생할 문제는 뒤에서 언급합니다).

function main(){
	console.log(this); // this에는 아래 main함수를 호출한 객체인 window 객체가 담겨있음
}

main(); // window.main()와 동일.

const 요니 = {
	name: "요니",
	main: function(){
		console.log(this); // this에는 함수를 호출한 "요니" 객체가 담김
	}
}

요니.main();

const 빅요니 = {
	name: "빅요니",
	smallYeonny: { // 오브젝트(빅요니) 안에 오브젝트(스몰요니)가 있는 경우 
		name: "스몰요니",
		function main(){
			console.log(this); // this에는 직접적으로 함수를 호출한 "smallYeonny" 객체가 담김
		}
	}
}

빅요니.smallYeonny.main();

아래처럼 이벤트리스너 함수에서도 this 개념이 재등장합니다.

const button = document.getElementById("btn");

button.addEventListener("click", function(event){
	console.log(event.target === this); // 요 이벤트 함수를 호출한 객체 button이 출력됩니다 
})

 

🍋 this의 문제점?

다이내믹 this 바인딩 이슈 JS의 this는 아래 상황에 따라 다른 값이 바인딩될 수 있습니다.

1. 전역 공간의 this: 전역 객체
2. 호출한 인스턴스의 메서드 내부의 this: 메서드를 호출한 객체
3. 호출한 일반 함수 내부의 this: 지정되지 않음 → 지정되지 않는 값을 상위 스코프에서 찾으면서 최상위 환경에 도달하면 전역 객체인 this를 마지막으로 바인딩함.

 

위 예시처럼 this값은 동적으로 바뀌고, 이를 원하지 않고 특정 메소드를 호출할 때 특정한 this 객체를 묶어주고 싶은 경우도 있을 것이다.

이 문제를 해결하기 위해 2가지 방법이 제안되었고, 시간 순으로 방법 1 → 방법 2 (ES6)가 등장하였습니다.

 

방법 1. bind, call, apply 함수를 활용한 특정 객체로 바인딩

 

bind

const 요니 = {
	name: "요니",
	main: function(){
		console.log(this); 
	}.bind(요니);
}

 

이때 bind라는 HOC 함수를 활용하여 main메서드에 “요니” 객체를 묶어놓은 새로운 메서드를 만들 수 있다.

call

function welcome(){
	console.log(this, x,y);
}

const 요니 = {
	name: "요니",
}

welcome.call(요니, 3,4) 

bind와 유사한 기능을 하는 함수로 apply, call이 있습니다. 첫째 인자는 this에 바인딩되고, 이후 인자들은 매개변수로 전달되어 즉시 실행되는 메서드이다.

apply

function welcome(){
	console.log(this, x,y);
}

const 요니 = {
	name: "요니",
}

welcome.apply(요니, [3,4]) 

call 함수와 동일하게 첫째 인자는 this에 바인딩되지만, 이후 인자들이 리스트 형태로 전달되어 즉시 실행되는 메서드이다.

 

방법 2. 화살표 함수 활용

화살표 함수를 사용하면, 함수가 선언될 시점에서 자신의 실행 콘텍스트에 this가 존재하지 않아 바로 상위 스코프의 this로 바인딩됨.

따라서 bind 하던 함수를 화살표 함수로만 대체해 주면 문제 해결 가능.

const 고정객체 = {
	name: "휴먼",
}

const 요니 = {
	name: "요니",
	main: () => {
		console.log(this); // 요니 객체 
	};
}

그렇다면 화살표 함수를 언제 쓰는 게 좋을까?

별개의 this가 생성되는 건 원하지 않고, 외부 콘텍스트에 있는 this를 사용하고 싶은 경우 화살표 함수를 사용할 수 있다.

 

 

 

하지만...!!

상황에 따라 this에 할당되는 값이 달라질 수 있기에, 어떤 상황에 따라 다른 값이 바인딩되는지 이해함으로써 this를 더 잘 쓸 수 있다. 

 

1. 동적 바인딩 ⚠️

일반 함수의 경우 메서드로 호출되느냐 / 아니면 함수 자체로 호출되느냐에 따라 동적으로 this가 바인딩됩니다.

 

1.1. 일반 함수로 호출

const actor = {
	name: "송강",
	callName: () => console.log(this.name); 
}

actor.callName() 
// 자신을 호출한 actor 객체가 아니라,
// Window. 함수스코프보다 한 단계 상위스코프인 전역스코프가 this로 바인딩.

1.2. 메소드로 호출

var nameCard = {
  name: "송강",
  addClickEvent: function () {
    this.element = document.getElementById(this.name);

    var logName = function () {
      console.log("Hello! ", this);
    };

    // this.element.addEventListener("click", logName); // this.element 출력
		this.element.addEventListener("click", logName.bind(this)) // 해당 실행문의 this(메소드 호출 객체)로 재바인딩 시켜야함
  }
};

nameCard.addClickEvent();

1.3. 화살표 함수 사용

const nameCard = {
  name: "송강",
  addClickEvent: function () {
    this.element = document.getElementById(this.name);

    var logName = () => { // 함수가 선언된 시점의 상위 스코프의 this로 자동 바인딩 
      console.log("Hello! ", this.name);
    };

    this.element.addEventListener("click", logName);
  }
};

nameCard.addClickEvent();

 

 

참고자료:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind

https://ko.javascript.info/arrow-functions-basics