TypeScript를 사용하여 React에서 결합 추상화 손실

개요

OOP 디자인 원칙을 염두에 두고 React 구성 요소를 빌드하면 구성 요소가 미래에 어떻게 작동하고 사용하기가 얼마나 쉬울지 실제로 전환할 수 있습니다. 이 글은 Liskov Substitution Principle의 개념과 React 컴포넌트와 이를 React에 적용하는 방법에 대한 소개입니다.

일반적인 생각

원칙 뒤에 있는 아이디어는 상위 클래스의 객체가 애플리케이션을 중단하지 않고 하위 클래스의 객체로 대체될 수 있어야 한다는 것입니다. 이를 위해서는 상위 클래스 객체가 하위 클래스와 동일한 방식으로 동작하고 동일한 입력을 가져야 합니다.

React 용어로 구성 요소의 추상화를 제거하면 구성 요소는 추상화를 사용하는 동안과 동일한 방식으로 동작해야 합니다.

React에서 Liskov 치환 원칙 적용하기

실제로 이것을 봅시다.
사용자 정의 React 구성 요소 라이브러리를 빌드해야 합니다. 우리가 사용해야 할 구성 요소 중 하나는 사용자 정의 Button입니다. Button 구성 요소는 수정을 위해 닫히는 버튼 스타일을 제외하고는 일반 버튼과 동일한 기능을 가져야 합니다.

버튼의 props 인터페이스는 다음과 같습니다.

interface IButtonProps extends Omit<React.HTMLAttributes<HTMLButtonElement>, "style"> {}

인터페이스를 살펴보겠습니다.

IButtonProps는 기본 HTML<button/>의 HTML 속성을 확장합니다. React.HTMLAttributes<HTMLButtonElement> . 이렇게 하면 수동으로 작성하는 대신 네이티브<button/>의 속성을 재사용할 수 있습니다.

이 접근 방식의 장점은 사용자 정의 Button 구성 요소를 버리고 기본값<button/>을 사용하기로 결정하면 제대로 작동한다는 것입니다.

이 접근 방식을 사용할 때의 또 다른 큰 장점은 기본 HTML 요소가 소품을 상속하므로 나머지 팀이 이미 사용자 정의 Button의 인터페이스에 익숙할 것이라는 점입니다.

다음으로 살펴볼 것은 인터페이스를 선언할 때 사용되는 Omit 단어입니다. Omit는 제공된 인터페이스에서 속성을 선택 해제하는 데 도움이 되는 Typescript 도우미입니다. 다음과 같이 | 연산자를 사용하여 여러 props를 생략할 수 있습니다.

interface IButtonProps extends Omit<React.HTMLAttributes<HTMLButtonElement>, "style" | "className"> {}

이제 사용자 정의 Button 구성 요소를 선언해 보겠습니다.

const style = {
  // My custom Button style
};

function Button(props: IButtonProps) {
  return <button {...props} style={style} />;
}

여기서 언급해야 할 또 다른 사항은 props가 <button/> 에 전달되는 방식입니다. style prop이 props 에 의해 재정의될 수 없도록 하려면, style 나머지 부분을 구조화한 후 props prop을 정의해야 합니다. 이렇게 하면 style prop이 속성을 통해 전달되더라도 사용자 지정 스타일에 의해 재정의됩니다. 누군가 TypeScript 오류를 무시하기로 결정하더라도 여전히 해당 오류를 전달하지 못합니다style.

지금까지는 이 모든 것이 훌륭해 보이지만 다른 예를 살펴보겠습니다. 구성 요소 라이브러리의 일부로 사용자 지정Paragraph 구성 요소를 빌드해야 합니다. 우리는 스타일을 적용할 수 있는지 확인해야 합니다. text-align , font-weight ... 아이디어는 Liskov 치환 원리를 적용하는 것이라는 점을 다시 명심하십시오.

이 예에서는 아래와 같이 인터페이스를 구축할 수 있습니다.

interface IParagraphProps extends React.HTMLAttributes<HTMLParagraphElement> {
  style?: Pick<
    React.CSSProperties,
    "textAlign" | "fontWeight"
  >;
}

무슨 일이 일어나고 있는지 파헤쳐 봅시다.
IParagraphProps는 기본 HTML<p/> 요소의 속성을 확장합니다. 사용자 정의 Button과 마찬가지로 아이디어는 기본 요소와 동일한 속성을 공유하는 것입니다. 다음으로 정의되는 것은 style 속성입니다. Pick라는 단어는 미리 정의된 인터페이스에서 일부 속성을 선택할 수 있는 또 다른 TypeScript 도우미입니다. 이 경우 구성 요소는 textAlign 및 fontWeight 만 허용합니다.

Paragraph 컴포넌트를 구현해 봅시다.

const style = {
  // My custom Paragraph style
};

function Paragraph(props: IParagraphProps) {
  return <p {...props} style={{ ...style, ...props.style }} />;
}

결론

TypeScript를 사용하여 React 구성 요소를 빌드할 때 Liskov 대체 원칙이 어떻게 적용되는지 방금 보았습니다. 이를 통해 추상화에서 기본 요소의 속성을 재사용하고 사용자 정의 구성 요소가 추상화와 기본 요소 간의 인터페이스를 끊지 않고 구현할 수 있는 기능만 선택할 수 있습니다.