바닐라 JS 클래스 삽질 기록: 설계부터 this와의 씨름까지

1. 왜 클래스?

• 단순 함수와 전역 변수: 가장 간단하지만, 여러 카운터를 만들 경우 상태 관리가 복잡해지고 변수 이름 충돌이나 스코프 문제가 생기기 쉬웠다.
• 클로저(Closure) 활용: 클로저를 이용해 상태를 숨기고 함수를 반환하는 팩토리 함수 패턴도 가능했다. 상태를 비공개로 유지할 수 있다는 장점이 있지만, 여러 인스턴스를 만들 때마다 함수들이 새로 생성되는 점, 그리고 '틀'로서의 명확성이 클래스보다는 부족하다고 느껴졌다.
• ES5 생성자 함수와 프로토타입: new 키워드와 함께 사용하는 전통적인 방식이다. 클래스와 가장 유사하지만, prototype을 직접 다뤄야 해서 문법이 다소 번거롭고 가독성이 떨어진다고 생각했다.

이런 점들을 고려했을 때, ES6의 class 문법이 관련 데이터(상태)와 기능(메서드)을 하나의 '설계도'처럼 묶어주고, new 키워드로 인스턴스를 생성하는 방식이 가장 직관적이고 구조적으로 보였다. 코드의 의도를 명확히 드러내고, 객체 지향의 개념을 적용하기에도 적합하다고 판단했다.

2. 카운터 클래스 구상하기 (설계 단계)

클래스를 사용하기로 결정하고, 구체적으로 카운터 컴포넌트에 필요한 요소들을 설계하기 시작했다.

• 핵심 데이터 (Properties):
  • count: 현재 숫자 값을 저장할 내부 상태. 초기값은 0으로 설정한다.
  • displayElement: 카운터 값을 표시할 외부 DOM 요소. 클래스 외부에서 받아와야 한다.
  • incrementButton: 카운터를 증가시킬 버튼 DOM 요소. 이것도 외부에서 받아온다.
  • (추가 고려) decrementButton: 감소 기능도 넣는다면 필요할 수 있다. (이번엔 증가만 구현하기로 함)
• 핵심 기능 (Methods):
  • increment(): count 속성 값을 1 증가시킨다.
  • updateDisplay(): 현재 count 값을 displayElement의 텍스트 내용으로 업데이트한다. 이 메서드는 increment 내부에서도 호출되어야 하고, 초기화 시점에도 호출되어야 한다.
• 초기 설정 (Constructor):
  • displayElement와 incrementButton을 인자로 받는다.
  • 받아온 DOM 요소들을 클래스 내부 속성(e.g., this.displayElement)에 할당한다.
  • count 속성을 0으로 초기화한다.
  • 초기 화면 표시를 위해 this.updateDisplay()를 호출한다.
  • 버튼 클릭 이벤트를 감지하고, 클릭 시 this.increment 메서드가 실행되도록 연결한다. (이 부분에서 this 문제가 예상되었다.)

처음에는 단순히 기능만 나열했는데, 이렇게 속성(데이터)과 메서드(기능), 그리고 생성자(초기화)로 나누어 생각하니 클래스의 구조가 더 명확해졌다.

3. 구현 시작: constructor와 첫 this의 벽

설계를 바탕으로 코드를 작성하기 시작했다. 생성자에서 외부 요소를 받아와 내부 속성에 할당하는 것 자체는 어렵지 않았다.

JavaScript

 

class Counter {
  constructor(displayEl, buttonEl) {
    // 초기값 설정
    this.count = 0; 
    
    // 전달받은 DOM 요소를 내부 속성에 할당
    // 'this'는 생성될 인스턴스를 가리킨다.
    this.displayElement = displayEl; 
    this.buttonElement = buttonEl;

    console.log('Counter 인스턴스 생성됨:', this); // 디버깅: this 확인

    // 초기 화면 업데이트 (메서드 호출)
    this.updateDisplay(); 

    // 여기서부터 this 문제 발생 가능성 인지
    this.buttonElement.addEventListener('click', /* ??? */);
  }

  // 메서드 정의...
  increment() {
    this.count++;
    console.log('Incrementing count to:', this.count); // 디버깅
    this.updateDisplay(); 
  }

  updateDisplay() {
    console.log('Updating display with count:', this.count); // 디버깅
    this.displayElement.textContent = this.count; 
  }
}

여기까지는 괜찮았다. this가 새로 생성될 인스턴스를 가리킨다는 점만 이해하면 됐다. 문제는 이벤트 리스너를 설정하는 부분에서 발생했다.

4. 이벤트 핸들러와 this의 재앙, 그리고 해결 과정

가장 큰 난관은 역시 this였다. 버튼 클릭 시 increment 메서드를 실행하도록 아래처럼 연결했더니 예상대로 문제가 발생했다.

JavaScript

 

// 문제의 코드 (constructor 내부)
this.buttonElement.addEventListener('click', this.increment); 

버튼을 클릭하면 increment 메서드가 실행되긴 하지만, 그 안에서 this가 Counter 인스턴스가 아니라 this.buttonElement (즉, 이벤트를 발생시킨 버튼 요소)를 가리켰다. 왜냐하면 addEventListener의 콜백 함수로 메서드가 전달될 때, 메서드 호출의 주체(context)가 Counter 인스턴스가 아니라 버튼 요소 자체가 되기 때문이다. 그래서 increment 내부의 this.count++나 this.updateDisplay()는 버튼 요소에 count 속성이나 updateDisplay 메서드를 찾으려다 실패하고 에러를 발생시켰다 (TypeError).

이걸 확인하기 위해 increment 메서드 맨 위에 console.log('this in increment:', this); 를 넣어보니 명확히 버튼 요소가 출력되었다.

해결책 1: Function.prototype.bind()

bind 메서드는 호출될 때의 this 값을 특정 객체로 고정한 새로운 함수를 반환한다. 이걸 사용하면 increment 내부의 this가 항상 Counter 인스턴스를 가리키도록 할 수 있다.

JavaScript

 

// 해결 코드 1 (constructor 내부)
this.buttonElement.addEventListener('click', this.increment.bind(this)); 
// this.increment 함수를 호출하되, 내부의 'this'는 항상 현재 Counter 인스턴스를 가리키도록 묶음

해결책 2: 화살표 함수 (클래스 필드 문법 활용)

메서드를 정의할 때 화살표 함수를 사용하면, 해당 함수는 자신만의 this를 갖지 않고 자신을 둘러싼 외부 스코프(여기서는 constructor 또는 클래스 자체)의 this를 그대로 상속받는다. 즉, Counter 인스턴스를 this로 사용하게 된다. 이걸 사용하면 bind 없이도 깔끔하게 해결 가능하다. (단, 클래스 필드 문법은 비교적 최신 스펙이므로 브라우저 호환성 확인이 필요할 수 있다.)

JavaScript

 

class CounterWithArrowFn {
  constructor(displayEl, buttonEl) {
    this.count = 0;
    this.displayElement = displayEl;
    this.buttonElement = buttonEl;
    this.updateDisplay();

    // 화살표 함수로 정의된 메서드는 this가 자동으로 바인딩됨
    this.buttonElement.addEventListener('click', this.increment); 
  }

  // 메서드를 화살표 함수로 정의
  increment = () => {
    this.count++;
    // 이 안의 this는 항상 Counter 인스턴스
    this.updateDisplay(); 
  }

  updateDisplay = () => {
    this.displayElement.textContent = this.count;
  }
}

두 방법 모두 유효했지만, 화살표 함수 방식이 코드가 더 간결해 보였다. this 문제 하나 해결하는 데도 자바스크립트의 실행 컨텍스트와 함수의 동작 방식에 대한 깊은 이해가 필요하다는 것을 깨달았다.

5. 배운 점 정리

이번 바닐라 JS 클래스 구현 경험을 통해 몇 가지 중요한 점을 배울 수 있었다.

• 클래스는 관련 데이터와 기능을 캡슐화하여 코드를 구조화하는 데 유용하다.
• 클래스 설계 단계에서 필요한 속성과 메서드를 미리 정의하는 것이 구현에 도움이 된다.
• 자바스크립트에서 this는 함수 호출 방식에 따라 동적으로 결정되므로, 특히 콜백 함수로 메서드를 전달할 때 주의가 필요하다.
• bind나 화살표 함수를 사용하여 메서드 내의 this 컨텍스트를 명시적으로 관리할 수 있다.