UI 라이브러리 요소 주위에 래퍼를 추가하여 유지 관리가 더 쉬운 UI 만들기

많은 최신 프로젝트는 UI 라이브러리를 활용하여 Material-UI 및 Chakra UI와 같은 인기 있는 선택으로 개발 시간을 단축합니다. 많은 개발자들이 원하는 UI 요소를 가져와서 원하는 방식으로 스타일을 지정하고 필요한 곳에 사용하기만 하면 됩니다. 이것은 충분히 잘 작동하지만 비슷한 스타일과 기능을 가진 동일한 요소를 여러 개 추가해야 하는 경우 빠르게 문제가 됩니다. 무언가를 변경하고 싶을 때 유지 관리가 어려워지는 코드 전체를 복사하여 붙여넣는 작업을 끝낼 수 있습니다.

그래서 당신은 무엇을합니까? 자체 구성 요소에 요소를 추가하고 UI 라이브러리에서 구성 요소 주위에 래퍼를 추가합니다.

좋은 예는 Chakra UI에서 버튼을 가져오고 싶지만 버튼의 기본 색상이 마음에 들지 않거나 애니메이션을 추가하려는 경우입니다. 원하는 위치에 직접 가져오고 원하는 수정 사항을 추가하는 대신 자체적으로 구성 요소를 생성하고 가져오고 수정한 다음 프로젝트 전체에서 사용할 새 구성 요소를 내보냅니다.

래핑된 요소

import React from "react";
import { Button as ChakraButtonComponent } from "@chakra-ui/react";

interface ButtonProps extends React.ComponentProps<typeof ChakraButtonComponent> {
  //Add additional prop definitions here
  mySpecificProp: string;
}

const Button = (props: ButtonProps) => {
  return (
    <ChakraButtonComponent className="button-class" {...props}>
      {props.children + "  " + props.mySpecificProp}
    </ChakraButtonComponent>
  );
};

export default Button;

래핑된 요소 사용 중

import Button from "./button";

const MyComponent = () => {
  return (
    <div>
      <Button mySpecificProp="hello">My Button!</Button>
    </div>
  );
};

export default MyComponent;

위의 예에서는 UI 라이브러리에서 UI 요소를 가져옵니다(설명이 포함된 이름으로 변경하지만 필수는 아님). 그런 다음 내보낼 구성 요소의 구성 요소 소품에 대한 인터페이스를 선언합니다. 여기서 가장 중요한 라인은 … extends React.ComponentProps입니다. 이것이 할 일은 UI 요소를 명시적으로 선언하지 않고도 UI 요소의 소품에 대한 인텔리센스를 제공하는 것입니다. 이 요소에 대한 특정 사용 사례가 있고 그에 대한 소품을 가져와야 하는 경우와 같이 추가 소품도 추가할 수 있습니다. 여기서 마지막은 UI 요소에서 요소를 반환하고 요소에서 spread 연산자를 사용하여 props를 펼치는 것입니다.

이렇게 하면 몇 가지 이점이 있습니다.

버튼 요소가 필요할 때마다 UI 라이브러리에서 직접 요소 대신 이 요소를 가져옵니다. 앱의 모든 버튼을 전체적으로 변경해야 하는 경우 버튼의 모든 인스턴스가 아니라 이 구성 요소만 변경하면 됩니다.
이 특정 요소에 필요한 모든 사용 사례별 항목을 적용할 수 있습니다.
UI 라이브러리에 얽매이지 않습니다. 예를 들어 Chakra UI가 더 이상 요구 사항을 충족하지 않거나 실험하고 싶은 다른 UI 라이브러리가 있다고 결정합니다. 다른 UI 라이브러리로 변경하는 것은 단순히 가져오기를 변경하고 잠재적으로 파일의 요소 이름을 바꾸는 것만큼 쉽습니다. props는 다른 요소이기 때문에 분명히 변경되므로 애플리케이션 전체에서 업데이트해야 할 수도 있지만 그 외에는 그게 전부입니다.

읽어 주셔서 감사합니다. 이 기사가 흥미롭고 도움이 되었기를 바랍니다. 이 글이 마음에 드셨다면 좋아요를, 질문이 있으시면 댓글을 남겨주세요!

프런트 엔드 개발에 대해 자세히 알아보려면 여기 Dev.to, on 및 에서 저를 팔로우하세요. 가장 인기 있는 오픈 소스 리포지토리를 보려면 hot.opensauced.pizza도 확인하십시오!