[React Native] 스토리북(Storybook) 컴포넌트 & 스토리 추가하기

React Native 스토리북(Storybook) 컴포넌트(component) & 스토리(story) 추가, 생성하기

 

React Native 앱 프론트 개발을 할때 스토리북을 사용하면 편하게 개발할 수 있습니다.

사용할 컴포넌트들을 스토리북을 통해 보다 직관적으로 볼 수 있어 재사용이나 이해하기 좋은것 같습니다.

 

이제 스토리북(Storybook)에 컴포넌트(component)랑 스토리(story)를 추가해 보겠습니다.

 

먼저 스토리북 설치와 기본 세팅이 안되신 분은 앞선 글을 보시고 설치 및 세팅을 해주시면 됩니다.

아래 링크를 통해 들어가시면 됩니다~!

https://dlee0129.tistory.com/5

[React Native] 스토리북(StroyBook) 설치

App이라는 폴더에 하위 폴더로 components와 stories폴더를 생성해주었습니다.

 

연습으로 버튼 컴포넌트를 생성하고 스토리에 추가해서 화면에 띄어보도록 하겠습니다.

 

먼저 components폴더 하위 폴더로 Button폴더를 생성하고 ,

그 안에 AppButton.js 파일을 추가합니다.

AppButton.js에 아래 코드를 추가해줍니다. 코드는 hook 방식을 사용해서 입력했습니다.

아직 초보라서 코드가 맘에 안드실 수 있을겁니다... 예시니깐 참조만 해주세요ㅜ

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

const AppButton = ({
    style,
    onPress,
    children,
    ...props
}) => {

    return(
        <TouchableOpacity
            style={[styles.button, style]}
            onPress={onPress}
            {...props}
        >
            {children}
        </TouchableOpacity>
    )
}

const styles = StyleSheet.create({
    button: {
        width: '100%',
        height: 50,
        alignItems: 'center',
        justifyContent: 'center',
        borderWidth: 1,
        borderRadius: 5,
        borderColor: 'grey'
    }
})

export default AppButton;

 

다음으로 stories 폴더 아래에 Button.stories.js 파일을 추가하고 아래 코드를 입력해줍니다.

import React from 'react';
import AppButton from '../components/Button/AppButton';
import { storiesOf } from '@storybook/react-native';
import { Text } from 'react-native';

storiesOf('Button', module) // Button은 NAVIGATOR 탭에 추가될 스토리 이름 입니다.
    .add('default', () => ( // default는 component 명이 됩니다.
        <AppButton> 
            <Text>
                Button
            </Text>
        </AppButton>
    ));

 

마지막으로 storybook폴더 내의 storyLoader.js에 가서 다음과 같이 추가해주시면 완성입니다.

function loadStories() {
  require('../App/stories/Button.stories');
}

const stories = [
  '../App/stories/Button.stories'
];

module.exports = {
  loadStories,
  stories,
};

 

 

이제 화면에서 React Native를 실행하시면 화면에 새로 생성한 컴포넌트를 보실 수 있습니다.

 

스크린에 추가하지 않아도 바로 생성한 컴포넌트를 보실 수 있습니다.

여러사람들과 협업을 할 때에 요긴하게 사용하실 수 있을거 같습니다.