ES6 화살표 함수에서 this가 다르게 동작합니다

Question

jQuery에서 클릭 이벤트 핸들러를 화살표 함수로 바꿨더니 this가 클릭한 요소가 아니라 window를 가리킵니다. 왜 그런가요?// 이게 안 됨 $(".btn").click(() => { $(this).addClass("active"); // this가 window?! });

김영삼 · Accepted Answer

화살표 함수는 자신만의 this를 가지지 않고, 선언된 위치의 this를 그대로 사용합니다 (lexical this).// ❌ 화살표 함수 — this가 상위 스코프(window) $(".btn").click(() => { $(this).addClass("active"); // this = window }); // ✅ 일반 함수 — this가 클릭된 요소 $(".btn").click(function() { $(this).addClass("active"); // this = 클릭된 .btn }); // ✅ 화살표 함수 쓰려면 event.target 사용 $(".btn").click((e) => { $(e.target).addClass("active"); });규칙: 이벤트 핸들러에서 this가 필요하면 일반 함수, 아니면 화살표 함수를 쓰세요.

프론트수진 · Answer

그런데 React에서는 화살표 함수를 많이 쓰는데 this 문제 없나요?

김영삼 · Answer

React에서는 오히려 화살표 함수가 유리합니다. 클래스 컴포넌트에서 this.setState를 호출할 때 화살표 함수가 클래스 인스턴스의 this를 유지하거든요. jQuery와 React의 this 처리 방식이 정반대라고 보시면 됩니다.

프론트수진 · Answer

아 그래서 React에서 화살표 함수를 권장하는 거였군요! 명확하게 이해했습니다 감사합니다 😊

댓글 4