[typescript] 객체 분해 할당과 프로퍼티 셋터/게터를 사용한 UI 컴포넌트 재사용성 높이기

12 Dec 2023

typescript

웹 애플리케이션을 개발하는 과정에서 UI 컴포넌트의 재사용성은 매우 중요합니다. 타입스크립트에서는 객체 분해 할당과 프로퍼티 셋터/게터를 사용하여 UI 컴포넌트의 코드를 간결하게 작성하고 재사용성을 높일 수 있습니다. 이번 포스트에서는 이러한 두 가지 기술을 사용하여 UI 컴포넌트를 어떻게 개발하고 재사용성을 향상시킬 수 있는지 살펴보겠습니다.

1. 객체 분해 할당을 사용한 UI 컴포넌트 재사용성

객체 분해 할당은 구조 분해(destructuring) 혹은 비구조화 할당이라고도 불리며, 객체 또는 배열에서 원하는 값들을 추출하여 여러 변수에 할당하는 기능을 제공합니다. 이를 활용하여 UI 컴포넌트의 속성을 쉽게 분해하여 사용할 수 있습니다.

예를 들어, 다음과 같이 Button 컴포넌트를 정의하고 사용할 수 있습니다.

class Button {
  constructor(private props: { text: string, onClick: () => void }) {}

  render() {
    const { text, onClick } = this.props;
    return `<button onclick="${onClick}">${text}</button>`;
  }
}

const buttonProps = { text: "Click me", onClick: () => console.log("Button clicked") };
const myButton = new Button(buttonProps);
document.body.innerHTML = myButton.render();

위 예제에서 Button 클래스는 props 객체를 받아 객체 분해 할당을 통해 필요한 값을 추출하여 사용합니다. 이를 통해 Button 컴포넌트는 text와 onClick 속성을 동적으로 받아 사용할 수 있으며, 이는 재사용성을 높여줍니다.

2. 프로퍼티 셋터/게터를 사용한 UI 컴포넌트 재사용성

프로퍼티 셋터/게터를 사용하여 UI 컴포넌트의 속성을 보다 유연하게 다룰 수 있습니다. 타입스크립트는 접근자를 사용하여 속성에 대한 게터(getter)와 셋터(setter)를 정의할 수 있습니다.

아래는 Input 컴포넌트 예제입니다.

class Input {
  private _value: string = '';

  get value(): string {
    return this._value;
  }

  set value(newValue: string) {
    this._value = newValue;
  }

  render() {
    return `<input type="text" value="${this._value}" />`;
  }
}

const myInput = new Input();
myInput.value = 'Hello';
document.body.innerHTML = myInput.render();

위 예제에서 Input 클래스는 value 속성에 대한 게터와 셋터를 사용하여 속성값을 설정하고 렌더링할 수 있습니다. 이를 통해 Input 컴포넌트를 보다 유연하게 사용할 수 있으며, 재사용성을 높일 수 있습니다.

요약

이러한 객체 분해 할당과 프로퍼티 셋터/게터를 활용하면 UI 컴포넌트의 재사용성을 높일 수 있습니다. 이를 통해 유연하고 간결한 코드를 작성할 수 있으며, 웹 애플리케이션의 유지보수성을 향상시킬 수 있습니다.

References: