인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

신동마님의 프로필 이미지
신동마

작성한 질문수

웹 게임을 만들며 배우는 React

클래스 컴포넌트의 형태와 리액트 데브툴즈

리액트 class 컴포넌트 중 this 질문입니다.

해결된 질문

작성

·

258

0

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {liked: false};
    this.onClickButton = this.onClickButton.bind(this) // 이걸 안써주면 동작 안함
  }
	
  onClickButton() {
    this.setState({liked: true});
  }
				 
  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }

    return (
      <button onClick={this.onClickButton}>
        Like
      </button>
    );
  }
}

이 코드에서 this가 button 태그를 가르키기 때문에 bind함수로 LikeButton 클래스 인스턴스로 바인딩 해주어야

화살표 함수가 아닌 일반 function 키워드 함수로 메서드를 정의했을때 동작하는게 맞는걸까요?

 

화살표 함수라면 button 태그를 가르키지 않고 바깥 this를 그대로 가져오기 때문에 LikeButton 클래스 인스턴스를 가져오는 것이 맞을까요?

 

답변 2

0

신동마님의 프로필 이미지
신동마
질문자

빠른답변 감사합니다 !!

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

네 맞습니다!

console.log(this) 해보시면 차이가 눈에 보입니다

신동마님의 프로필 이미지
신동마

작성한 질문수

질문하기