공용 Text 컴포넌트 만들기

제목

소제목

본문

 

위와 같이 제목에는 underline/ 폰트 사이즈 25/ 굵게의 스타일이, 본문에는 폰트사이즈 12/ 색을 진회색으로 등 일정한 스타일을 공통적으로 사용해야하는 경우가 있다. 이때 공통으로 사용되는 스타일을 Typography 컴포넌트의 속성으로 지정해, 이에 따라 원하는 스타일을 선택할 수 있도록 한다면 편리하고 재사용가능한 코드를 만들 수 있다.

 

1. 인터페이스 정의(Typescript)

속성으로 들어올 값을 미리 정의한다. 우리는 텍스트 내용을 필수로 받아야 하며, 상황에 따라 타입(제목/ 소제목/ 기본), ViewStyle, TextStyle을 추가로 설정할 수 있도록 해야하므로 아래와 같이 정의한다.

interface TypographyProps {
  value: string;
  type?: 'default' | 'title' | 'subtitle';
  containerStyle?: StyleProp<ViewStyle>;
  textStyle?: StyleProp<TextStyle>;
}

 

 

2. 인터페이스를 따르는 Typography 컴포넌트를 만든다.

들어오는 props 중 type에 대한 내용이 없으면 default 로 지정해주고 나머지는 그대로 가져온다.

이후 각 타입에 따른 스타일을 지정해주고, Text 컴포넌트의 속성으로 넣어준다.

const Typography: React.FC<TypographyProps> = props => {
  const {type = 'default', value, containerStyle, textStyle} = props;
  let myStyle;

  if (type == 'default') {
    myStyle = styles.default;
  } else if (type == 'title') {
    myStyle = styles.title;
  } else if (type == 'subtitle') {
    myStyle = styles.subTitle;
  }

  return <Text style={[myStyle, containerStyle, textStyle]}>{value}</Text>;
};

 

 

3. 스타일 정의

각 타입에 따라 정의한 스타일(styles.default, styles.title, styles.subtitle)을 원하는 대로 정의한다.

const styles = StyleSheet.create({
  default: {
    fontSize: 12,
    color: '#333333',
    fontWeight: '400',
    textAlign: 'center',
  },
  title: {
    fontSize: 25,
    color: '#333333',
    fontWeight: '700',
    textAlign: 'center',
    textDecorationLine: 'underline',
  },
  subTitle: {
    fontSize: 18,
    color: '#333333',
    fontWeight: '700',
    textAlign: 'center',
  },
});

 

 

4. 사용

아래와 같이 value 와 속성을 지정해 사용할 수 있다.

<Typography value="이건 제목이에요!" type="title" />

<Typography value="소제목이구요~" type="subtitle" />

<Typography value="본문입니다 ^^"/>