🌱 기초 프론트엔드
this 키워드가 뭔가요?
쉽게 이해하기
'나'라는 단어의 의미는 누가 말하느냐에 따라 달라지죠. 철수가 '나'라고 하면 철수를 가리키고, 영희가 '나'라고 하면 영희를 가리켜요. JavaScript의 this도 비슷하게, 어디서 호출되느냐에 따라 가리키는 대상이 달라집니다.
핵심 정리
현재 실행 중인 함수가 속한 객체를 가리키는 JavaScript 키워드예요.
자세히 알아보기
this는 JavaScript에서 가장 헷갈리는 개념 중 하나예요. 같은 함수라도 어떻게 호출하느냐에 따라 this가 가리키는 대상이 달라지거든요.
객체의 메서드로 호출하면 this는 그 객체를 가리켜요. 예를 들어 user.getName()을 호출하면 this는 user 객체가 됩니다. 하지만 그냥 함수로 호출하면 this는 window(브라우저) 또는 undefined(strict mode)가 돼요. 이벤트 리스너에서는 this가 이벤트를 발생시킨 요소를 가리킵니다.
화살표 함수(=>)는 this를 다르게 처리해요. 일반 함수는 호출 시점에 this가 결정되지만, 화살표 함수는 선언될 때의 this를 그대로 사용합니다. 그래서 콜백 함수나 이벤트 핸들러에서 외부의 this를 사용하고 싶을 때 화살표 함수를 많이 써요.
React 클래스 컴포넌트에서 this를 많이 봤을 거예요. 메서드에서 this.state나 this.props에 접근하죠. 하지만 요즘은 함수형 컴포넌트와 훅을 주로 사용해서 this를 덜 신경 쓰게 됐어요. 그래도 this의 동작 원리를 이해하면 JavaScript의 실행 컨텍스트를 더 잘 이해할 수 있습니다.