#TIL19, React | this와 bind()

개인 공부를 위해 작성했습니다

State & Event에 대해 공부하던 중, this와 bind의 개념을 정립하고자 기록해본다.

○this의 의미

• 객체지향 언어에서의 일반적인 this는 현재 객체를 지칭
• 하지만, js의 this는 실행할 때의 context를 의미함

class component를 만들 때, class method 형태로 event handler를 만들게 된다

이 때 JSX의 render()에 method를 전달할 때에는 this를 써줘야 한다. 만약 this를 써주지 않으면 this는 undefined가 되므로 전달한 메소드는 작동하지 않는다. 여기서 this는 component를 가리킨다.
즉, 렌더링될 때 이 component 안의 메소드야! 라고 전달하는 것과 같은 의미.

이렇게 해야하는 이유는,

• javascript에서 함수가 작동하는 방식때문이다
  • react는 javascript문법을 사용하므로, javascript의 작동 방식이 반영된다

●React 에서의 this

• 컴포넌트의 render()함수가 실행되면 DOM이 그려진다
• 이때 this 는 component 내부에서 선언한 method 객체를 가리키는 것이 맞지만
• event handler함수가 호출될 때의 this는 component 내부에서 선언한 method 객체를 가리키는 것이 아닌 전역객체(Window)를 의미한다
• 왜냐하면 this 라는 값은 호출하는 문맥(context)에의해 좌우되는데 클릭이 실행되는 문맥이 바로 전역(window)객체이기 때문..

---

○bind()

bind 함수는 바인드하는 함수에서 사용하는 this의 대상을 지정해주는 역할을 한다

const objA = {
  name: 'a',
  aFunc: function() {
    console.log(this.name)
  },
}

const objB = {
  name: 'b',
}

objA.aFunc() // 예상대로 a가 출력
objA.aFunc.bind(objB) // objA 객체의 aFunc 함수에서 bind(objB)를 호출. bind 메서드에 전해진 인자는 복사된 바인딩 함수의 this 로 전달. 즉, aFunc 함수내의 this가 objB가 된다
const foo = objA.aFunc.bind(objB) // 바인드 함수를 변수에 할당
foo()
4
// b

• objA.aFunc.bind(objB) : objB에 objA의 aFunc 메소드를 bind 한다.
  = 원본 aFunc 함수와 동일한 기능을 하는 바인딩된 새로운 함수가 만들어 진다

●React 에서의 bind()

• bind()함수는 전달된 인자를 this로 보내는 바인딩 함수를 만드는데
• this 는 다른 언어와 달리 실행 문맥(context)에 따라 변한다
• React 에서 이벤트 핸들러 함수를 바인드할때 화살표 함수를 사용하자!

---

TL; DR

Arrow Function을 사용하면! click, change 등의 이벤트 리스너를 붙여줄때마다 bind()함수를 작성하는 귀찮은 일을 하지 않아도 된다!

React_공식분서/State & Event
[ES6, react] 리액트에서 화살표 함수(arrow function)는 선택이 아닌 필수