[javascript] 웹 컴포넌트의 상태(State)와 프로퍼티(Props) 관리 방법

07 Dec 2023

javascript

웹 컴포넌트는 재사용 가능한 UI 요소를 개발할 때 사용되는 기술입니다. 이 기술을 사용하면 독립적인 컴포넌트를 만들고, 이를 조합하여 더 복잡한 UI를 구성할 수 있습니다. 웹 컴포넌트를 개발할 때 주요한 개념인 상태(State)와 프로퍼티(Props)를 효율적으로 관리하는 방법에 대해 알아보겠습니다.

상태(State)

상태는 웹 컴포넌트의 내부 데이터를 나타냅니다. 이 상태는 컴포넌트의 외부에서 변경되면 안 되고, 오로지 컴포넌트 내부에서만 변경되어야 합니다. 상태를 관리하기 위해 state 변수를 사용합니다.

웹 컴포넌트에서 state 변수를 정의하고 관리하는 예시를 살펴보겠습니다.

class MyComponent extends HTMLElement {
  constructor() {
    super();
    this.state = {
      count: 0,
    };
  }

  // 상태 변경 메서드
  incrementCount() {
    this.state.count++;
    this.render();
  }

  decrementCount() {
    this.state.count--;
    this.render();
  }

  // 렌더링
  render() {
    this.innerHTML = `
      <button onclick="this.decrementCount()">-</button>
      <span>${this.state.count}</span>
      <button onclick="this.incrementCount()">+</button>
    `;
  }

  // 컴포넌트가 DOM에 추가되었을 때 호출되는 라이프사이클 메서드
  connectedCallback() {
    this.render();
  }
}

// 웹 컴포넌트 등록
customElements.define('my-component', MyComponent);

상태를 효과적으로 관리하기 위해 다음 사항을 고려해야 합니다.

상태가 변경될 때마다 render 메서드를 호출하여 화면을 업데이트합니다.
상태 변경 메서드(incrementCount, decrementCount)에서는 내부 상태를 변경하고, render 메서드를 호출합니다.
상태가 변경되었을 때만 render 메서드가 호출되어 성능을 향상시킵니다.
상태 변경 메서드를 이벤트 핸들러로 사용할 때는 this가 원하는 컴포넌트를 가리키도록 바인딩해야 합니다.

프로퍼티(Props)

프로퍼티는 웹 컴포넌트의 외부에서 설정되는 속성입니다. 이 속성은 웹 컴포넌트를 사용하는 쪽에서 설정하며, 컴포넌트 내부에서는 읽기 전용으로 사용됩니다. 프로퍼티를 관리하기 위해 observedAttributes와 attributeChangedCallback을 사용합니다.

프로퍼티를 관리하는 예시를 살펴보겠습니다.

class MyComponent extends HTMLElement {
  static get observedAttributes() {
    return ['name'];
  }

  // 프로퍼티 변경 감지
  attributeChangedCallback(attributeName, oldValue, newValue) {
    if (attributeName === 'name') {
      this.renderName(newValue);
    }
  }

  // 이름 렌더링
  renderName(name) {
    this.innerHTML = `<p>Hello, ${name}!</p>`;
  }
}

// 웹 컴포넌트 등록
customElements.define('my-component', MyComponent);

// 사용 예시
const myComponent = document.querySelector('my-component');
myComponent.setAttribute('name', 'John');

프로퍼티를 효과적으로 관리하기 위해 다음 사항을 고려해야 합니다.

observedAttributes에서 감지할 속성을 지정합니다.
attributeChangedCallback에서 속성의 변경을 감지하고, 필요한 로직을 실행합니다.

결론

웹 컴포넌트의 상태(State)와 프로퍼티(Props)는 컴포넌트 개발에 있어서 중요한 개념입니다. 상태는 컴포넌트 내부에서 관리되어야 하며, 프로퍼티는 외부에서 설정되는 속성으로 사용됩니다. 위에서 설명한 방법을 참고하여 효율적으로 상태와 프로퍼티를 관리하는 웹 컴포넌트를 개발해보세요.

참고 자료: