Storybook은 자바스크립트 앱의 컴포넌트 개발을 도와주는 강력한 도구입니다. 이번 글에서는 Storybook을 사용하여 자바스크립트 모바일 앱의 테마를 개발하는 방법에 대해 알아보겠습니다.

1. Storybook 설치 및 설정

먼저, Storybook을 설치해야 합니다. 프로젝트의 루트 디렉토리에서 다음 명령어를 실행하여 설치하십시오.

npm install @storybook/react-native --save-dev

설치가 완료되면, .storybook라는 디렉토리를 생성한 후, 그 안에 main.js 파일을 생성하십시오. 이 파일에서는 Storybook의 설정을 관리할 수 있습니다.

2. 테마 파일 작성

Storybook에서 사용할 테마 파일을 작성해야 합니다. 보통 theme.js라는 이름으로 파일을 생성하고, 다음과 같은 코드를 작성하십시오.

// theme.js

export default {
  colors: {
    primary: '#FF0000',
    secondary: '#00FF00',
    // ...
  },
  typography: {
    fontSize: 16,
    // ...
  },
  // ...
};

테마 파일은 앱에서 사용할 색상, 글꼴, 크기 등을 정의하는 객체입니다. 필요한 속성과 값을 추가하여 필요한 테마를 설정할 수 있습니다.

3. Storybook 컴포넌트 작성

이제 Storybook에 테마를 적용할 컴포넌트를 작성해야 합니다. 예를 들어, Button 컴포넌트를 작성해보겠습니다.

// Button.js

import React from 'react';
import { StyleSheet, Text, TouchableOpacity } from 'react-native';

const Button = ({ text, onPress }) => (
  <TouchableOpacity style={styles.button} onPress={onPress}>
    <Text style={styles.text}>{text}</Text>
  </TouchableOpacity>
);

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#FF0000',
    // ...
  },
  text: {
    fontSize: 16,
    // ...
  },
});

export default Button;

Button 컴포넌트는 text와 onPress prop을 받아 화면에 버튼을 렌더링합니다.

4. Storybook에 컴포넌트 등록

이제 작성한 Button 컴포넌트를 Storybook에 등록해야 합니다. .storybook 디렉토리 안에 stories.js 파일을 생성하고, 다음과 같이 작성하십시오.

// stories.js

import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { ThemeProvider } from 'react-native-elements';
import Button from '../Button';
import theme from '../theme';

storiesOf('Button', module)
  .addDecorator((getStory) => (
    <ThemeProvider theme={theme}>{getStory()}</ThemeProvider>
  ))
  .add('Default', () => <Button text="Click me" onPress={() => {}} />);

위 코드에서는 react-native-elements 패키지의 ThemeProvider를 활용하여 Storybook에 테마를 적용하고, Button 컴포넌트를 등록합니다. Default라는 이름의 스토리를 추가하여 버튼을 렌더링합니다.

5. Storybook 실행

모든 설정이 완료되었습니다. 이제 Storybook을 실행하여 결과를 확인해보십시오. 프로젝트의 루트 디렉토리에서 다음 명령어를 실행하십시오.

npm run storybook

Storybook이 실행되면 웹 브라우저에서 확인할 수 있습니다. Button 컴포넌트를 클릭하여 버튼의 테마가 적용되었는지 확인해보십시오.

결론

이렇게 Storybook을 활용하여 자바스크립트 모바일 앱의 테마를 개발하는 방법을 알아보았습니다. Storybook은 컴포넌트 개발을 더욱 쉽고 효율적으로 할 수 있도록 도와줍니다. 테마 개발에 Storybook을 활용하면 컴포넌트의 외관을 빠르게 확인하고 개선할 수 있습니다. 추가로 Storybook을 사용하여 다양한 컴포넌트를 개발해 보세요.

참고문헌:

• Storybook 공식 문서