• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    해결됨

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

23.10.31 00:20 작성 조회수 181

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

신동마님의 프로필

신동마

질문자

2023.10.31

빠른답변 감사합니다 !!

0

네 맞습니다!

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