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

하루 10시간 공부하기님의 프로필 이미지

작성한 질문수

누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌

State 를 사용하는 방법

this에 관해서 질문드립니다!!

작성

·

222

0

1.

4:05 에서 this.state.number에서 this는 App.js에서 return <Counter /> 구문이 실행될때 Counter.js에 있는 this.state.number가 실행되서 this가 Counter이란걸 아는건가요/?

2. handleDecrease 함수에서 화살표 함수의 this는 외부에서 찾기 때문에 <Counter/>가 실행될때 외부에서 State값을 찾을 수 있었던 건가요?

3. handleDecrease 함수가 그냥 function이면 이 함수가 호출될때 handleDecrease함수만 분리되서 나오기 때문에 this를 못 찾는 것인가요?

답변 1

0

이미 해결하셨겠지만 저도 복습할 겸 답변드립니다.
1. class 내부에서 this는 클래스나 인스턴스를 가리킵니다. 때문에 {this.state.number}의 this는 Counter 클래스기에 내부의 property인 state의 number로 접근이 가능합니다.

2. ES6의 arrow function의 JS의 결함이였던  this를 넘길 때 끊어지는 문제를 해결한 문법입니다. 내부적으로 넘긴 this를 다른 함수에서 매개변수로 받을 때 동일한 this를 사용할 수 있도록 내부적으로 처리합니다.

3. 위와 동일하게 ES6이전의 JS 문법자체가 함수 내부의 this를 전역(window/global)으로 지정한 문제로 인해서 this global scope에서 찾기에 의도한 this를 찾지 못합니다.

단순히 JS만의 this에 대해서 아직 공부를 안하신 것 같은데 inflearn의 JSFlow(정재욱) 강의를 추천드리고 귀찮으시다면 제가 정리한 블로그를 확인해주세요 :)