해결된 질문
작성
·
54
1
안녕하세요:) 수업 잘 듣고 있습니다.
2.1.4 공급자와 소비자 강의 中 7:04에서
this.setValue = this.setValue.bind(this)를 작성하셨는데
리액트에서의 바인딩이란 자식 컴포넌트에 프로퍼티로 이벤트 핸들러와 다른 함수들을 전달할 때,
구체적으로 핸들러 안에서 부모 컴포넌트에 접근할 필요가 있을 때 해야 하는 것으로 알고 있습니다.
그런데, setValue는 자식 컴포넌트로 이벤트 핸들러를 넘겨주는 상황이 아닌데 이벤트 바인딩을 해야 하는 이유가 무엇인지 궁금합니다.
화살표 함수를 활용하면 자연스럽게 바인딩이 되는데 왜 화살표함수를 안쓰신 건지 궁금합니다.
답변 2
0
this
를 바인딩하는 건 자식 컴포넌트에게 함수를 전달하는 것 외에도 다양한 상황에서 사용됩니다. 가령 이벤트 핸들러를 전달하거나 특정 메서드를 호출할 때, 현재 클래스 인스턴스를 참조하도록 this
를 고정하기 위해 바인딩이 필요합니다. 이는 자바스크립트의 this
가 함수가 실행되는 환경(호출 주체)에 따라 참조하는 객체가 달라지기 때문입니다.
화살표 함수를 사용하면 this
를 현재 클래스 인스턴스로 고정할 수 있는데요. 이는 화살표 함수가 렉시컬 컨텍스트(함수가 선언된 위치의 컨텍스트)를 사용하기 때문입니다. 하지만 클래스 내부에서 화살표 함수를 정의하려면 일반적으로 클래스의 멤버 변수로 정의해야 합니다. 예를 들면 다음과 같습니다:
class MyComponent extends React.Component {
setValue = (value) => {
this.setState({ value });
};
}
이 방법은 편리하지만, 멤버 변수로 정의된 함수는 클래스의 프로토타입이 아닌 인스턴스에 직접 할당됩니다. 이는 메모리 측면에서 약간의 비용을 추가로 발생시킬 수 있으며, 대규모 애플리케이션에서는 성능에 영향을 미칠 가능성도 있습니다.
또한, 멤버 변수는 언제든지 값이 변경될 수 있기 때문에 코드 유지보수 시 예기치 않은 동작이 발생하지 않도록 관리에 주의해야 합니다.
아래 인프런 AI 인턴 답변도 참고하시면 좋습니다.
0
안녕하세요, 인프런 AI 인턴입니다. 이재은님, 리액트의 바인딩에 대한 질문을 주셨네요.
setValue 메서드를 바인딩하는 이유는 리액트 클래스 컴포넌트에서 콜백 함수가 ‘this’를 정확히 가리키도록 하기 위함입니다. 자바스크립트에서 클래스 메서드를 콜백으로 전달할 때는 ‘this’의 컨텍스트가 변경될 수 있습니다. 따라서 setValue와 같은 메서드를 ‘this’에 바인딩하지 않으면, 동작 시 ‘this’가 의도한 컴포넌트를 가리키지 않아 에러가 발생할 수 있습니다.
이벤트 바인딩 필요성: 비록 setValue가 자식 컴포넌트로 직접 전달되는 상황은 아니지만, 메서드가 React의 라이프사이클 중에 호출되거나 다른 메서드에서 직접 호출되는 경우 바인딩이 필요합니다. 특히, 메서드가 이벤트 핸들러로 사용될 때 외에도, 클래스 내에서 ‘this’의 컨텍스트를 유지하기 위해 바인딩이 필요합니다.
화살표 함수 사용: 화살표 함수를 사용하면, 자동적으로 ‘this’가 상위 스코프와 바인딩되기 때문에 바인딩 과정을 생략할 수 있습니다. 하지만, 특정 상황에서는 성능 측면에서 클래스 필드 문법을 사용하여 메서드를 바인딩하는 것이 유리할 수 있습니다. 이는 다양한 컨텍스트에서 동작 방식에 대한 명확한 제어를 제공하기 위함입니다.
관련된 질문이 비슷한 예제를 다루고 있어 추천드립니다: 비동기 호출을 해줘야하니깐. this binding을 해줘야한다." 라는 말의 의미가 궁금합니다.
이해를 돕기 위해, 바인딩과 관련한 자바스크립트의 ‘this’에 대한 개념을 정리한 게시물도 함께 참고하시길 바랍니다: JavaScript Context and This Binding
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.