Storybook loaders 로 story에 비동기 데이터 주입하기

 

📌 loaders 로 데이터 전달하기

Storybook 6.1 부터 실험적 기능으로 loaders 가 추가되었습니다.

안정화 기간을 거쳐 Storybook 7.0 에서는 stable 로 변경되었는데요.

기존에 args 를 통해 컴포넌트에 데이터를 전달해주는 대신, loaders 에 데이터를 반환하는 함수를 정의함으로서 스토리북 render context 에 이를 할당할 수 있는 방법이 추가되었습니다.

 

모든 스토리에 적용되는지 유무에 따라 global loader 와 story loader 두 가지 방식으로 나뉘는데,

이번 경우에는 개별 스토리에 주입이 필요해서 story loader 방식을 사용했습니다.

 

📌 예시로 살펴봅시다.

다음과 같은 웹 컴포넌트가 있다고 하겠습니다.

해당 컴포넌트는 작은 캔버스에 이미지 데이터를 렌더링하는 역할을 위해 만들어졌습니다.

현재는 고정된 미리보기 이미지를 그려주고 있는데, 이를 동적으로 바꾸고 싶은 상황입니다.

 

import { html } from 'lit-html'

export const Basic = ({ caption, selected }) =>
  html`<v-canvas-preview caption="${caption}" selected="${selected}"></v-canvas-preview>`
Basic.args = {
  caption: '프리뷰 설명',
  selected: true,
}

 

이를 위해서 캔버스에 ImageData 를 전달해줘야합니다.

먼저 ImageData 를 생성하는 함수를 정의합니다.

테스트를 위해 샘플 이미지를 이용해서 ImageData 를 생성합니다.

 

async function getImageData() {
  return new Promise((resolve, reject) => {
    const canvas = document.createElement('canvas')
        canvas.width = 1000
    canvas.height = 1000

    const image = new Image()
    image.src = 'assets/images/test.png'
    image.addEventListener('load', () => {
            const ctx = canvas.getContext('2d')
      ctx?.drawImage(image, 0, 0, 130, 130)

      const imageData = ctx?.getImageData(0, 0, 130, 130)

      if (imageData) {
        resolve(imageData)
      } else {
        reject()
      }
    })
  })
}

 

canvas 에 불러온 이미지를 그린 다음, 스냅샷을 생성해서 ImageData 를 반환하는 함수입니다.

이미지 로딩이 비동기로 이루어지기 때문에 위 함수 또한 비동기 Promise 를 반환하며,

일반적인 args 전달 방식으로는 스토리북에 렌더링할 수 없습니다.

대신 loaders 를 이용해서 컴포넌트에 비동기 데이터를 전달할 수 있습니다.

다음과 같이 loaders 를 스토리에 추가합니다.

 

export const Basic = (
  { caption, selected },
  { loaded: { imageData } }
) => {
  console.log(imageData) // ✅ 로그로 확인해보자

  return html`<v-canvas-preview caption="${caption}" selected="${selected}"></v-canvas-preview>`
}

Basic.loaders = [
  async () => ({
    imageData: await getImageData(),
  }),
]

 

 

데이터가 올바르게 전달되는 것을 확인해봅니다.

이제 이 값을 컴포넌트에 넘겨준 뒤 원하는 방식으로 처리하면 됩니다.

이번 예제에서는 element 의 property 로 이 값을 지정해줍니다.

ImageData 로 캔버스에 렌더링하는 로직은 v-canvas-preview 내에 정의되어있으며

이번 포스트에서는 범위를 벗어나는 내용이기 때문에 구현을 생략합니다.

 

export const Basic = (
  { caption, selected },
  { loaded: { imageData } }
) => {
  const loadImageData = () => {
    setTimeout(() => {
      const $preview = document.querySelector('v-canvas-preview')
      if ($preview) {
        $preview.imageData = { image: imageData }
      }
    }, 0)
  }

  loadImageData()

  return html`<v-canvas-preview caption="${caption}" selected="${selected}"></v-canvas-preview>`
}

 

 

📌 참고자료

Loaders

Loaders