jquery 화살표 함수 this 오류

jquery에서 특정 이벤트를 발생시킬 때 파라미터로 일반 function 형태와 화살표 함수를 쓰거나 한다.

 

사람마다 스타일이 다르지만 화살표 함수의 경우 주의해야할 것이 있다.

 

$(".component-edit-button").click(function(){
  console.log($(this).data("content-id"));
  console.log($(this).text());
  $("#content-id").val($(this).data("content-id"));
})

이럴떄는 this를 사용할 수 있지만

 

$(".component-edit-button").click(()=>{
  console.log($(this).data("content-id"));
  console.log($(this).text());
  $("#content-id").val($(this).data("content-id"));
})

이렇게 작성하면 전체 html을 this로 본다. 따라서 하위 로직은 실행되지만 제대로 된 결과를 얻기 어렵다.

 

화살표 함수는 생성될 때 this가 결정되는데 이 때문에 화살표 함수를 어디에서 쓰더라도 그 값은 변하지 않는다고 한다.

 

꼭 주의하도록 하자.