node.js $(this) 문제

[이현준]

$('.delete').click((e)=>{

          var num = e.target.dataset.id;
          var now_click = $(this);
          //var now_click = $(this); // event가 동작하는 곳.
          $.ajax({
            method : 'DELETE', 
            url : '/delete', //요청할 경로
            data: {_id : num}, // 요청과 함께 보낼 데이터
            }).done((result) => {
              // 페이지를 강제로 새로고침해주세요.(location~) 또는 삭제버튼을 누른 <li>요소를 제거하거나 안보이게 해주세요.
              console.log('삭제 된거니');
              now_click.parent('li').fadeOut();
            })
        });

이렇게 코드를치고 실행 했을 때 '삭제된거니'는 잘 나오는데 fadeOut은 작동하질 않습니다. ('.delete').parent로 했을 때는 모든 li가 사라지는건 됩니다. 그렇다면 $(this)가 작동이 안된다는거 같은데 어떻게 해결을 해야 할지 모르겠습니다.

[이현준]

아 1월 글에서

아하 .click() 안에 ()=>{} 넣으셨는데 일반 함수 function(){} 이걸로 바꿔주십시오 

arrow function은 this의 의미를 다르게 설정해주기 때문에 이벤트리스너에선 얌전히 일반함수를 씁시다

 

이 답변을 참고해서 쓰니까 작동을 합니다.   그런데 arrow function에서는 다르게 설정해준다는 말씀이 어떤 의미 일까요?

[이현준]

그리고 res.status(200).send({ message : '삭제에 성공했습니다! '});

200을 400으로 변경을해도 그냥 삭제가 된다는건 status를 400으로 지정하든 200으로 하든 위의 코드는 다 작동을 한다는 뜻인건데... 400으로 넣었을 때는 삭제가 안되어야 되는 것이 아닌가요?

[codingapple]

function 문법을 쓰면 그거 안에 있는 this 라는 키워드의 값이 맨날 재정의가 됩니다

함수가 있던 object자료로 재정의가 되는데

그냥 쉽게 말하면 이벤트리스너안에서 쓰면 this는 '이벤트동작하는곳'으로 재정의가 됩니다

()=>{} 문법을 쓰면 그거 안의 this라는 키워드의 값을 재정의하지 않고 바깥에있던거 그대로 씁니다

 

200, 400 이런건 서버에서 보내주는 안녕반가워~ 이런 메세지랑 똑같아서 DB데이터 삭제하고말고와는 딱히 관계는 없습니다 

 

[이현준]

명쾌한 답변 감사합니다!

[글쓴이]

글