다음과 같이 간단한 Component 가 있다고 해보자.

class App extends Component{
	render(){
    	return(
        <div classname = "App">
          <a href = "/" onClick = {function(e){
        	console.log(this);
        }}></a>
        </div>
        );
    }
}

위의 결과를 실행시키면 undefined 가 나온다.

왜 이러한 결과가 나오는 것일까?

기본적으로 render 함수 안에서 this는 render 함수가 속해있는 그 Component 자체를 가리킨다.

그런데

strict mode가 적용된 일반 함수 내부의 this 에서는 전역객체인 window객체가 아닌 undefined가 바인딩 되는데,
class 내부는 암묵적으로 strict mode가 적용되기 때문에 여기서 this 는 undefined 로 바인딩 된다.

따라서 우리는 undefined 인 this 가 있을때 값을 주입 할 수 있는 방법이 있다.

bind()

let obj = {name : 'kim'};
let bindTest = function(){
	console.log(this.name);
}

위 코드의 결과는 undefined이다.

여기서 원하는 것은 this 의 값을 obj로 만드는 것이다.

bindTest.bind(obj);

위와 같이 bind() 함수를 이용하여 인자값을 obj로 주게되면, bindTest() 의 this 값은 obj가 된다.

이렇게 동작하는 새로운 함수가 복제되서 만들어지는 것이다.

bindTest2 = bindTest.bind(obj);

위의 결과는 kim이 정상적으로 나오게 된다.

주의할점!

Arrow function 에서는 bind,apply,call 을 사용 할 수 없다.