[ProPro] Component 추상화(2)

클래스 통일

클래스 필드, 메서드

기존에는 클래스필드 방식을 사용하여 메서드처럼 사용했다.

class Component {
  // 생략...
  render = () => {};
}

그런데 이렇게 클래스필드를 사용하면 재사용할 수 있게 만든 컴포넌트가 여러번 호출되어 인스턴스로 만들어지게 되면 호출된 만큼 함수가 중복으로 생성된다고 한다.

반면에 클래스메서드 방식으로 생성을 하면 class의 prototype에 단 한번만 생성되기 때문에 성능상으로 이점이 있다고 생각되어 클래스 메서드방식을 사용하기로 했다.

class Component {
  // 생략...
  render() {};
}

메서드 호출 순서 강제

각자의 클래스 코드가 다른 이유 중 하나로 메서드 호출 순서가 정해져 있지 않다보니 서로 다른 호출순서를 가지고 있었다.

// 게시글 생성 페이지

export default class CreatePostPage extends Component {
  constructor(props) {
    super(props);
    // 생략...
    this.appendRoot(props, this.$dom);
    this.render();
    this.addEvent();
  }
  // 생략...
}

// 프로필 페이지

export default class ProfilePage extends Component {
  constructor(props) {
    super(props);
    // 생략...
    this.render();
    this.appendRoot(props, this.$dom);
  }
  // 생략...
}

이런 부분도 Core Component에서 순서를 보장해주면 코드를 통일시킬 수 있다고 생각되어 호출 순서를 강제하기로 했다.

class Component {
  constructor({ container, props }) {
    this.container = container;
    this.props = props;

    this.init();
    this.render();
    this.mounted();
  }
  // 생략...

  render() {
    this.container.innerHTML = this.markup();
    this.renderCallback();
    this.setEvent();
  }
}

최적화를 해야할 부분도 존재하고 추가하고 싶은 기능도 많지만 일단 수정된 Core Component에 맞춰서 각자의 컴포넌트를 수정하기로 하였다.