인프런 커뮤니티 질문&답변
작성한 질문수
3. 동물앨범 만들기-2-3 질문입니다.
해결된 질문
작성
·
126
2
해당 강의에서 컴포넌트를 만들고 상태관리를 할때 모든 코드에
this가 왜 붙는건가요??
저렇게 만든것도 그냥 객체인거 같은데 let state ={} 로안 하고 let도 없고 변수도 없는데 this로 state를 참조되는것도 궁금합니다.
모든 코드에 this가 붙는 이유
일반함수에 this한거니 그냥 window 객체에 state 변수가 생긴건지 궁금합니다.
2가 아니면 그냥 state라는 걸 자바스크립트가 제공해서 참조해서 사용하는것인지
this.state = {};답변 1
0
안녕하세요 🙂 좋은 질문 감사드립니다.
자바스크립트에서 컴포넌트를 만들고 상태 관리를 할 때 this 키워드를 많이 사용합니다.
[섹션 4 강의] 자바스크립트에서 this는 자신이 속한 객체 혹은 자신이 생성할 인스턴스를 가리키는 키워드라고 배웠습니다. 그렇기 때문에 컴포넌트의 내부에서 선언된 속성들과 메서드들을 참조하기 위해 사용되는 것입니다.
state는 자바스크립트에서 기본적으로 제공하는 객체가 아니라 우리가 state라는 속성을 사용해 상태관리를 하기 위해 만든 속성입니다.
export default function Content({ $app, initialState }) {
this.state = {};
this.render = () => {};
this.setState = (newState) => {
this.state = newState;
this.render();
};
this.render();
}위의 코드와 같이 Content라는 이름의 함수에 this를 사용하면, 여기에서 this는 Content 함수의 인스턴스를 가리킵니다. 즉, Content 함수 내에서 this를 사용해 해당 인스턴스의 상태와 메서드에 접근합니다.
그렇기 때문에 만약 this 키워드를 사용하지 않는다면, App.js 에서 아래와 같은 코드를 사용할 수 없게되겠죠.
const content = new Content();
content.setState(this.state.photos);결론적으로는, this는 자신이 속한 객체나 인스턴스를 가리키기 때문에 this를 사용하지 않으면 함수 내부의 상태와 메서드를 인스턴스와 연결할 수 없어, 이렇게 컴포넌트를 만들고 상태관리를 할 때 this 키워드를 사용하는 것입니다.
해결하셨다니 다행입니다 🙂
App 함수는 index.js 파일에서 생성자 함수로 사용되는 함수입니다.
따라서 생성자 함수로 사용한다고 가정을 하는 것이 아닌, 실제로 생성자 함수로써 사용이 되고 있기 때문에, 말씀드린것처럼 this는 window 객체를 가리키지 않고, window 객체에 state라는 속성을 생성하는 것이 아니라 App 함수가 생성한 인스턴스 객체 그 자체를 가리키는 것입니다!
실제로 index.js 파일의 코드를 보면 아래와 같이 new 를 사용해 생성자 함수를 호출하고 있는 것을 볼 수 있습니다 😊
import App from './App.js';
const $app = document.getElementById('app');
new App($app);
App.js에서 this.state라는게 var나 let이 없고 이미 만들어진것을 this하는게 아니라서 이해가 잘안갑니다.
혹시 this.state라고하면 일반함수라서 호출지인 브라우저 window 객체가 되고 window 객체에 state라는 값이 생겨나고 다른 일반함수들도 this.했을때 여기서는 호출하는 곳이 window라서 접근이 가능한건가요?
GPT로 해결 했습니다 해당 함수는 일반함수라고 생각했는데 생성자함수라고 하네요 일반함수처럼 생겼는데 저렇게 let 같은게 없이 this를 하면 생성자로 사용한다고 가정해서 생성자 함수가 되고 그 상태에서 this하면 해당 생성자 함수의 인스턴스인 App를 가리킨다고 합니다. 그래서 반드시 생성자함수로서 동작하도록 index에서 new로 생성했습니다.