개발/Angular

[Angular] 함수 바인딩(this)

뇽.뇽 2025. 5. 14. 18:48
반응형

Angular 프로젝트를 진행하면서, 그리드 컴포넌트에서 데이터를 추가하는 기능을 구현하던 중 예상치 못한 오류가 발생했습니다.
편집 버튼을 누르고 "추가(Add)" 를 실행했을 때, 내부 로직에서 this.user 값을 참조하지 못하는 문제가 있었습니다. 분명 this.user는 정상적으로 초기화되어 있었고, 다른 메서드에서는 문제 없이 동작했기 때문에 더 헤맸습니다. 문제는 바로 함수 바인딩이 누락되어 this 컨텍스트가 엉켜버린 상태였습니다.

반응형

 

문제 상황 요약

<app-grid [addDataFunc]="addDataFunc"></app-grid>
  • 위 코드에서 addDataFunc는 부모 컴포넌트의 메서드이며, 그리드에서 클릭 시 호출됩니다.
  • 그러나 내부에서 this.user에 접근하려고 하면 undefined 오류가 발생했습니다.

 

원인 분석: this 바인딩 누락

JavaScript에서 함수는 호출되는 시점의 컨텍스트(context) 에 따라 this가 달라집니다.
특히 Angular에서 함수를 자식 컴포넌트로 전달할 때는, 명시적으로 this를 바인딩하지 않으면 호출 시 this가 달라질 수 있습니다.

addDataFunc() {
  console.log(this.user); // undefined 발생
}

 

이 함수는 자식 컴포넌트 내부에서 함수 참조 형태로 호출되므로, this는 부모 컴포넌트가 아니라 자식 또는 전역 객체를 참조하게 됩니다.

해결 방법: bind(this)로 컨텍스트 고정

<app-grid [addDataFunc]="addDataFunc.bind(this)"></app-grid>
  • bind(this)를 사용해 함수의 this 컨텍스트를 명확히 부모 컴포넌트로 고정합니다.
  • 이제 this.user는 의도한 대로 정상적으로 동작합니다.

 

개념 정리: bind, call, apply 차이점

  • bind: 함수를 새로운 함수로 반환하며, this를 고정시킴. → 주로 콜백 전달용
  • call: 함수를 즉시 실행, this를 지정해 호출
  • apply: call과 거의 동일하나 인자를 배열로 전달
function greet() {
  console.log(this.name);
}

const person = { name: '정천용' };
greet.bind(person)(); // '정천용'

 

주의할 점

  1. 자식 컴포넌트로 함수 전달 시 반드시 bind(this)를 확인할 것
    특히 Angular의 [input] 속성을 통해 함수 전달할 때 자주 발생합니다.
  2. 화살표 함수는 바인딩 불필요하지만, 선언 방식에 주의할 것
    클래스 필드에 화살표 함수로 선언하면 자동으로 this가 바인딩됩니다.
  3. addDataFunc = () => { console.log(this.user); // OK }
  4. bind를 매번 호출하지 말고, 생성자에서 한 번만 묶는 방식도 고려
    렌더링마다 새로운 함수 인스턴스를 만들지 않으려면 아래처럼 사용하는 것도 방법입니다.
  5. constructor() { this.boundAddDataFunc = this.addDataFunc.bind(this); }

마무리하며

이번 문제는 단순한 바인딩 실수였지만, Angular 컴포넌트 간 통신에서 컨텍스트 관리(this) 가 얼마나 중요한지를 다시 한 번 깨닫게 해준 경험이었습니다.

초보 개발자일수록 간과하기 쉬운 부분이니, 함수 전달 시에는 반드시 this 바인딩 여부를 확인하세요.

 

반응형