새로운 JSX 기반 Snaps UI 컴포넌트 라이브러리 소개

개발자들이 Snap UI를 더 쉽게 만들고 이전보다 더욱 자유롭게 커스터마이징할 수 있도록, 업계 표준에 맞는 JSX 기반 UI 시스템을 도입했습니다. 이 시스템은 유연성이 부족했던 기존의 함수 기반 컴포넌트 시스템을 대체합니다. 새로운 UI 라이브러리를 통해 개발자는 커스텀 props로 인터페이스를 구성하고, 직접 템플릿 컴포넌트를 만들 수도 있습니다.

또한 이 새로운 시스템에는 포지셔닝, 버튼 변형, 드롭다운 등 다양한 인터랙티브 사용 사례를 지원하는 UX 컴포넌트가 포함되어 있습니다. 인라인 스타일 정의 시 개발자 경험이 향상되었으며, Markdown 사용 시 발생했던 문제들도 해소되었습니다.

기존 UI 라이브러리는 계속 지원되지만 deprecated(더 이상 권장되지 않음) 상태로 간주되며, 향후 특정 시점에 제거될 예정입니다. Snaps 개발자분들께서는 가능한 한 빨리 UI 코드를 새로운 JSX 기반 시스템으로 마이그레이션하시기를 권장합니다.

새로운 컴포넌트

Custom UI 생성을 간소화하는 것 외에도, 기존 함수 기반 컴포넌트에는 없는 두 가지 새로운 인터랙티브 JSX 컴포넌트를 제공합니다: Dropdown과 Field입니다. 이 컴포넌트들을 통해 Custom UI에 더 풍부한 인터랙티브 기능과 향상된 사용자 경험을 구현할 수 있습니다.

새로운 Box 컴포넌트는 기존 panel 컴포넌트를 대체하며, 포지셔닝 및 방향 옵션을 추가합니다. 이를 통해 사용 사례에 더 잘 맞는 풍부한 UI를 구성할 수 있습니다. Markdown은 Bold, Italic, Link 컴포넌트로 대체되어 서식이 있는 텍스트를 더 쉽게 다룰 수 있습니다.

앞으로도 JSX API에 새로운 컴포넌트를 계속 추가할 예정입니다.

나만의 컴포넌트 만들기

JSX API를 사용하면 React와 마찬가지로 직접 컴포넌트를 만들 수 있습니다. @metamask/snaps-sdk/jsx에서 기존 컴포넌트를 가져오거나, 직접 커스텀 컴포넌트를 조합할 수 있습니다. 간단한 예시는 다음과 같습니다:

import {Box, Form, Input, Button} from '@metamask/snaps-sdk/jsx'

export const MyCustomForm = (props) => (
<Box>
  <Form name="form-to-fill">
    <Input name="user-name" placeholder="Your name" />
    <Box direction="horizontal">
      <Button type="submit">Submit</Button>
      {props.isCancellable && <Button type="button" name="cancel">Cancel</Button>}
    </Box>
  </Form>
</Box>
);
복사

기존 Snap 프로젝트 업그레이드

기존 Snap 프로젝트를 JSX로 업그레이드하는 데 필요한 단계는 다음과 같습니다:

1. Snap 패키지의 의존성을 업데이트합니다.

2. JSX 컴포넌트를 완전히 사용할 수 있도록 린팅 규칙을 수정합니다.

3. Snap의 소스 파일에 JSX가 포함된 경우 파일명을 index.tsx로 변경합니다.

4. index.tsx를 가리키도록 Snap CLI 설정을 조정합니다.

5. JSX를 활성화하기 위해 Snap의 tsconfig.json 파일을 편집합니다.

각 단계에 대한 자세한 내용은 Snap 프로젝트를 JSX로 업그레이드하기 문서를 참고하세요.

시작하기

템플릿 Snap monorepo는 바로 시작할 수 있도록 이미 설정되어 있습니다. 다음 명령어를 사용하여 monorepo에서 새 Snap 프로젝트를 생성할 수 있습니다:

snap/src/index.tsx 파일에서 JSX를 활용한 Custom UI 사용 예시를 확인할 수 있습니다. @metamask/snaps-sdk/jsx에서 컴포넌트를 가져와 UI를 구성하는 데 활용하세요.

모든 컴포넌트와 props에 대한 자세한 내용은 JSX를 활용한 Custom UI 문서를 참고하시고, JSX를 사용한 샘플 Snap도 함께 살펴보세요.