this 개념에 대해서 궁금한점이 있어요!

[김현민]

class Profile extends React.Component {
    constructor(){
      super();
      this.state = { name : 'Kim', age : 30 }
    }
    changeName(){ this.setState( {name : 'Park'} ) }
    render(){
      return ( <div> <h3> 저는 { this.state.name } 입니다 </h3>
        <button onClick={ this.changeName }> 버튼 </button> </div> )
    }
}
(코드블럭이 어디있는지 몰라서 그냥 올립니다ㅜ  React강의 part 1 맨 마지막 강의 예제코드입니다)

ES6강의에서 this 에 관한 4가지 설명을 듣고 react에 쓰는 this에 생각해봤는데요,

 

제가 이해한 부분입니다. 잘못 이해한 부분이 있는지 질문드립니다

this.state.name은 생성자에서의 this를 가리켜 정상적으로 데이터바인딩이 된다.

button 이벤트리스너에 있는 this는 이벤트가 발생하는 곳을 의미하고, 여기서 changeName이라는 함수로 가서 state가 변경되어야 하지만, 발생하는 오류는 undefined오류가 발생한다.
이 원인은 새로 함수가 정의되면서 this가 가리키는것은 '주인님'이 없으므로 window를 가리키는데 이는 setState라는 내장함수가 없기 때문이다. ( 리액트에서도 window인가요 ? )
이때, bind(this)를 붙어주면 되는데, 여기서의this는 부모인 React에서 받아온(super()) constructor를 가리키고, state와 연결돼서 내장함수가 적용되는 것이다.

[codingapple]

그냥 class안에서의 this는 새로생성되는 오브젝트 (그냥 컴포넌트) 라고 이해하시면 됩니다. 

자바스크립트는 일반 function 함수안에선 this키워드를 쓰면 this가 다시 정의가 되도록 설계되어있습니다.

그래서 함수를 이상하게 만드시거나 onclick안에 쓰시면 함수 안에서의 this가 새로생성될 오브젝트(컴포넌트)를 가리키는게 아니라 이상한걸 가리키기도 합니다. 

이상한게 뭐냐면 undefined인데 use strict 모드에서 함수 만들면 안에서 this를 출력해보면 undefined가 나오게 되어있어서 그런듯요

 

그래서 대충만든함수.bind(this) 를 이용하는데 대충만든함수.bind(어쩌구)는 "그 대충만든함수에선 this쓸 때 그 뜻을 어쩌구로 설정하라~" 라는 뜻입니다. 여기서의 this도 그냥 새로생성될 object (컴포넌트) 를 의미한다고 보시면 됩니다. 

 

[글쓴이]

글