패스트캠퍼스 챌린지 46일차 (자바스크립트의 this 바인딩 방식)

this is hard

실행 환경에 따라 바뀌는 this

JavaScript에서 함수의 this 키워드는 다른 언어와 조금 다르게 동작합니다. 또한 엄격 모드와 비엄격 모드에서도 일부 차이가 있습니다.

대부분의 경우 this의 값은 함수를 호출한 방법에 의해 결정됩니다. 실행중에는 할당으로 설정할 수 없고 함수를 호출할 때 마다 다를 수 있습니다. ES5는 [함수를 어떻게 호출했는지 상관하지 않고 this 값을 설정할 수 있는](<https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this>) [bind](<https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/bind>) 메서드를 도입했고, ES2015는 스스로의 this 바인딩을 제공하지 않는 화살표 함수를 추가했습니다(이는 렉시컬 컨텍스트안의 this값을 유지합니다).

this = …

• 전역 호출시 window
• 함수에서 호출 시 window, strict mode 일 경우 undefined
• 인스턴스 메서드로 호출 시 앞에 붙은 인스턴스가 this => this.setState === [React.Component 인스턴스].setState
• 직접 바인딩 (call, apply, bind)
• 콜백의 경우 호출자가 결정하거나, this 를 인자로 직접 받음 => 브라우저 이벤트의 경우 엘리먼트 (eventTarget) => arr.forEach(callback(currentvalue[, index[, array]])[, thisArg])
• Arrow function - Lexical scope (선언 당시의 실행 환경을 this 로 수집)

공식 문서 둘러보기(MDN)

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this

클래스 컴포넌트에서 사용할 경우

이벤트 핸들러의 this 바인딩 문제 회피하기

import React from "react";
import "./styles.css";

class Greeting extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "Students!"
    };
  }

  changeName() {
		// this의 바인딩 문제가 발생한다
    ***this.setState({ name: "Students and Friends!" });***
  }

  render() {
    console.log(this);

    return (
      <>
        <h1>Hello, {this.state.name}</h1>
        <button onClick={this.changeName}>
          Change name to "Students and fiends!"
        </button>
      </>
    );
  }
}

직접 바인딩 하기

import React from "react";
import "./styles.css";

class Greeting extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "Students!"
    };
    ***this.changeName = this.changeName.bind(this);***
  }

  changeName() {
    this.setState({ name: "Students and Friends!" });
  }

  render() {
    console.log(this);

    return (
      <>
        <h1>Hello, {this.state.name}</h1>
        <button onClick={this.changeName}>
          Change name to "Students and fiends!"
        </button>
      </>
    );
  }
}

화살표 함수의 lexical this 활용

import React from "react";
import "./styles.css";

class Greeting extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "Students!"
    };
  }

  ***changeName = () => {
    this.setState({ name: "Students and Friends!" });
  };***

  render() {
    console.log(this);

    return (
      <>
        <h1>Hello, {this.state.name}</h1>
        <button onClick={this.changeName}>
          Change name to "Students and fiends!"
        </button>
      </>
    );
  }
}

 

---

 

 

 

 

 

https://bit.ly/37BpXiC

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다