내가 만드는 앱의 "텍스트"를 자동화하기

"텍스트"

앱을 만드는데 꼭 필요한 것 중 하나는 폰트를 적용할 수 있는 텍스트이다.

우선 텍스트 요소의 이름은 타이포그래피의 이름을 따서 타이포(Typo)라고 지었다.

코드를 작성해본다.

---

파일경로: /src/ui/elements/Typo.tsx

---

import React, {forwardRef, useEffect, useRef, useState} from 'react';

import {TextStyle, TextInputProps, Text, StyleSheet} from 'react-native';

import {getFontFamily, wp} from '@/ui/styles/globalStyles';

type Props = TextInputProps & {

style?: TextStyle;

};

const Typo = forwardRef(

({style, children, ...otherProps}: Props, ref: React.Ref<Text>) => {

const text = useRef((children as string) ?? '');

const lineHeightRatio = 1.2;

const fontSize = style?.fontSize ?? wp(15);

return (

<Text

{...otherProps}

style={[

styles.text,

{lineHeight: fontSize * lineHeightRatio},

style,

{fontFamily: getFontFamily(style?.fontWeight), fontWeight: undefined},

]}

ref={ref}>

{children}

</Text>

);

},

);

export default Typo;

const styles = StyleSheet.create({

text: {

color: '#4A4A4A',

},

});

---

이어서 파일 항목에 추가한다.

---

const fileInfoList: FileInfo[] = [

...

{path: 'src/ui/elements', name: 'Typo', ext: 'tsx'},

];

---

템플릿용 hbs 파일을 만든 후, 명령어를 실행한다.

---

잘 생성되었다...!

앞으로 폰트가 적용되는 텍스트 요소는 아무런 생각 없이 사용할 수 있겠지 ...