들어가기 전에

저번 시간에 bind(this)라는 코드를 추가해보았습니다. 이것은 무엇일까요?

이번 시간의 주제는 bind라고 하는 함수입니다. "bind"라고 하는 것은 엮는다, 묶어준다 라는 뜻이죠.

bind() 함수에 대해서 자세히 알아보겠습니다.

학습목표

bind 함수를 이해하고 이를 활용하여 this 키워드를 사용할 수 있습니다.

핵심단어

• bind()
• this

강의 듣기

이번 시간의 주제는 bind() 함수입니다. 

render() 함수가 호출될 때 render() 함수 안에서 console.log('render',this);를 실행시켜보면 "this"는 컴포넌트 자신을 가리킵니다.

bind를 지우고 아래 코드들을 return 을 해서 실행안되게 수정해보겠습니다. 

console.log('event in',this);
e.preventDefault();
return;

이때 'event in' 은 undefined입니다.

즉, 기본적으로 render라고 하는 저 함수안에서 this는 이 render 함수가 속해있는 그 컴포넌트 자체를 가리키는데

onClick안의 익명 함수는 이상하게 this가 아무 값도 가지고 있지 않습니다.

this를 주입하는 방법

익명 함수에 this 값이 없을 때 강제로 this를 주입하는 방법을 알아보겠습니다. 그 전에 bind() 라는 함수가 무엇인지 알아봅시다.

var obj ={name:'egoing'};

function bindTest(){
  console.log(this.name);
}

bindTest();

name은 egoing이란 값이 있는 객체를 만들고 bindTest() 함수를 호출했을 때  this의 값을 obj로 설정하려고 합니다.

하지만 bindTest() 함수를 실행하게 되면 undefined가 출력됩니다. this 는 지금 obj가 될 이유가 전혀 없기 때문입니다.

var bindTest2 =bindTest.bind(obj);

bindTest() 라는 함수에 bind()라고 하는 함수를 다시 호출합니다. 그리고 저 bind()함수에 첫번째 인자로 obj 를 부여합니다.

이렇게 코드를 수정하게 되면 bind() 함수로 인해서 bindTest() 함수의 블록 안에서 this는 obj가 되게 됩니다.

즉, 우리가 원하는 동작을 수행하는 bindTest2() 라고 하는 새로운 함수가 만들어집니다.

bindTest2();

bindTest2()라는 함수 내부에서 this의 값이 obj가 됐기 때문에 bindTest2() 함수를 실행시키면 egoing이 출력됩니다.

다시 말해 bind()라고 하는 함수가 하는 일은 우리 코드에서 onClick 이벤트에 bind(this)를 하게 되면

<APP>컴포넌트 자체를 가르키는 객체를 함수 안으로 주입해서 이 함수 안에서 this는 그 객체가 되게 하는 것입니다. 

생각해보기

onClick 안의 this의 값이 undefined인 원인은 무엇일까요?