JavaScript의 this 메소드바인딩을 이해하기 위해서는 먼저 자바스크립트의 "this"라는 메소드의 이해가 무조건적으로 필요하다. Show
자바스크립트에서 객체 안의 메소드 this는 이 메소드가 포함된 object를 가리킨다. 위의 예제에서 sayHello 메소드 안의 this는 a의 객체가 되어 a.prop인 Hello를 전달받아 콘솔에 Hello를 출력한다. 즉, 정리하자면 this는 A를 의미하며, A의 prop인 Hello를 받아 출력한다. 여기까지는 매우 기초적인 this의 활용법이다. 그렇다면 아래의 예제를 한 번 살펴보자.
이번에는 A의 sayHello()를 B라는 변수에 넣어 출력해보면 undefined가 출력되는 것을 확인할 수 있다.
JavaScript 바인딩바인딩은 "묶다"라는 사전적 의미로, 코딩에서의 바인딩은 두 데이터 혹은 정보의 소스를 일치시키는 기법을 의미한다. 즉, 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터(여러개의 JavaScript 객체)를 일치시키는 것을 말한다. A와의 관계가 끊어져 슬프신 우리 sayHello(), 한 번 연결해보자.
지금까지 this 메소드를 이용한 JavaScript 내에서의 바인딩을 알아보았다. 하지만 React 내에서의 바인딩과 JavaScript내에서의 바인딩의 방법은 살짝 다르다. 다양한 방법이 있지만, React 내에서의 바인딩은 주로 Component에 이벤트메서드를 연결하는 방법으로 사용된다. 아래 예제를 한 번 살펴보자. React 바인딩
위의 예제는 버튼을 눌러 Hello를 Goodbye로 만드는 예제인데 오류를 일으키는 코드이다. 바인딩을 하지 않았기 때문에 버튼을 눌렀을 때, Cannot read property 'setState' of undefined 에러가 발생한다. 그렇다면 아래와 같이 바인딩을 한 번 해보자.
이 외에도 React에서 바인딩 하는 방법 중 ES2015에서 제공하는 기능인 arrow function을 사용하면 바인딩할 수 있는데, onClickButton 메서드를 "() =>" arrow function으로 만들면 된다. this와 실행 컨텍스트자바스크립트는 스크립트 언어로, 인터프리터에 의해 줄 단위로 읽혀서 해석되어 실행된다. 인터프리터에 의해 현재 실행되는 자바스크립트의 환경을 실행 컨텍스트라고 한다. 자바스크립트 내부에서 이러한 실행 컨택스트를 스택으로 관리하며, 실행되는 시점에 자주 변경되는 실행 컨택스트를 this가 가리킨다. 즉, this는 현재 실행되는 코드의 실행 컨텍스트를 가리킨다. binding 종류1. default기본적으로 this는 전역객체를 가리킨다. node환경에서는 2. 일반 함수 내부일반적인 함수 내부에서 this를 호출하면 전역객체를 가리키는데, 3. 객체의 메소드 내부객체 내부의 메소드 내부에서 this를 호출하면 해당 객체를 가리킨다. 이 경우 주의해야 할 점이 있는데, 1. 메소드 내부의 함수 내부에서 호출할 경우, 이는 함수 내부에서 호출한 것이 되어 전역객체를 가리키게 된다.
이 경우, 메소드 내부에서 this를 정의해주어야 한다.
2. 어떻게 호출하느냐 또한 중요하다.
4. 생성자 함수 내부new 연산자로 생성자 함수를 호출할 때, 생성자 함수 내부에서 호출된 this는 생성자 함수를 통해 새로 생성되어 반환되는 객체를 가리킨다.
일반함수를 호출할 경우, this는 전역 객체를 가르키게 되므로 window 객체의 foo1와 foo2가 출력된다. 화살표 함수와 this bindinges6에서 추가된 화살표 함수 내부에서 this를 사용할 경우, this에 바인딩할 객체가 정적으로 결정되기 때문에 call, apply, bind로 this를 변경할 수 없다.
화살표 함수 내부의 this는 언제나 상위 스코프의 객체를 가리키는데, 이를 lexical this(문맥적 this)라고 한다. 화살표 함수로 메소드를 선언하는 것은 위험하다객체의 메서드를 화살표 함수로 선언할 경우, this는 해당 객체가 아닌 전역 객체를 가리키게되므로 주의해야 한다.
화살표 함수는 prototype 속성이 없다
addEventListener의 콜백 함수화살표 함수는 콜백 함수로 사용하기 편리하다. 하지만 addEventListener의 콜백함수의 경우, 이벤트 리스너에 바인딩된 요소를 가리켜야 하는데 이 때 화살표 함수를 사용하면 전역 객체를 가리키게 되므로 주의해야 한다. |