this 관련해서 질문드립니다

[권구현]

이전에 es6문법 강의에서 this에 대해 공부했었는데요.
리액트 사용중에 이해하기 힘든 부분이 있어 질문드립니다.

일단 두 js파일이 있습니다.
Utils.js는
export default class Log{
    Write(){
        console.log(this)
    }
}

App.js는 
import Log from './Utils';
function App() {
  const my_log=new Log();
  return (
    <div className="App">
      <button onClick={my_log.Write}>Button1</button>
      <button onClick={()=>{my_log.Write()}}>Button2</button>
    </div>
  );
}

보시면 간단히 아시겠지만
Utils.js는 Write라는 함수만을 가지는 객체를 반환합니다
App.js에서 Log객체를 가져와서 버튼에 Write함수를 실행하도록 이벤트를 주었습니다.

객체 안에서 정의된 메소드인만큼 this가 항상 Log객체 가리킬줄알았는데 Button1은 undefined를 출력하고 Button2는 의도대로 Log객체를 출력합니다.

제가 어떠한 요소를 생각하지 못했는지 궁금하고 항상 Button2와 같이 함수를 실행하는 함수를 만들어서 주는 방식이 적합한건지 궁금합니다.

질문 읽어주셔서 감사합니다.

[권구현]

다시 천천히 생각해봤는데

<button>Button</button>
<script>
    obj = { Write() { console.log(this) } }
    obj.Write()
    document.getElementsByTagName("button")[0].onclick=obj.Write
</script>

obj.Write()에서 obj객체가 출력되고
버튼클릭에서 버튼태그가 출력되는데
강의 내용중에 4번째 this, 이벤트 리스너에 해당하는것같네요...
강의와 달리 객체의 멤버함수를 넘겨서 다른 내용이라고 착각했었는데 결국 
document.getElementsByTagName("button")[0].onclick=function(){console.log(this)}와 완전히 동일한 작동이었나보네요

질문에서 undefined 뜨는 이유는 리액트 jsx라서 태그 호출이 제대로 안되는걸로 이해했습니다.

[codingapple]

맞는듯요 근데 리액트의 html은 가짜 html이라서 정확히 파악하기는 힘듭니다

[글쓴이]

글