컴포넌트 작성법

1. 작성할 컴포넌트를 분류한다.

• Atomic(atoms, molecules, organisms, templates, pages)으로 분류

2. 컴포넌트를 작성한다.

import React from 'react';

import * as S from './style';

// key뒤에 '?' 가 없다면 isRequired prop이다. (반대로 있다면 not isRequired)
// 설명이 필요한 props에는 위에 주석을 작성한다 /** 설명 */ => storybook에 표시됨
interface Props {
  /** Hi there */
  content: string;
  /** This is sample description */
  onClick?: object;
  /** haha */
  disabled?: boolean;
  /** have a good day :) */
  style?: object;
}

function Btn({
  /* required props*/
  content,
  /* default props*/
  disabled = false,
  style = {},
}: Props): React.ReactElement {
  return <S.Btn>{content}</S.Btn>;
}

export default Btn;

1. Props interface를 작성한다.
2. required / default props를 나누어 작성한다.

3. 스타일을 작성한다

// example
import styled from 'styled-components';
import { palette } from 'styled-tools';

export const InnerContainer = styled.div`
  height: 10rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
`;

interface IImgDivProps {
  imgSrc: string;
}

export const ImgDiv = styled.div<IImgDivProps>`
  width: 100%;
  height: 8.12rem;
  background: url(${p => p.imgSrc}) center center / cover;
`;

4. 스토리를 작성한다.

• 파일명은 index.stories.tsx이다.
• 위치는 컴포넌트와 sibling이다.

import React from 'react';
import { text } from '@storybook/addon-knobs';

import Btn from '.';

export default {
  title: 'Atoms / Btn',
};

export const index: React.FC = () => (
  <Btn content={text('contentText', 'awesome')} />
);

• title은 atomic 분류 / 컴포넌트 이름 으로 한다.
• 컴포넌트에 따라 적절한 addon을 이용한다.
  • knob (storybook 패널에서 값이 수정가능)
  • action (이벤트에 대한 추적가능)