[스터디 부록]_React Native 구글 폰트

React-Native에서 폰트 사용하기

공식 문서 참조

React-Native에서 구글 폰트를 사용하는 방법은 2가지 정도가 있는 것 같다.

1. Font.loadasync 사용하기

2. useFonts 훅 사용하기

사실 아직 Hook이 어떤 기능인지 제대로 아는 상태는 아니지만..
1번보단 2번이 더 간편해 보여서(?)
이번 포스팅에서는 useFonts를 사용하여 구글 폰트를 사용하는 방법을 정리할 예정!

공식 문서에서는 inter라는 폰트를 예시로 들어 설명을 해 주고 있는 것 같은데,

1. 우선 터미널에 해당 명령어를 입력하여 사용하고자 하는 폰트를 설치해 준다.

$ expo install expo-font @expo-google-fonts/폰트 이름

*사용 가능한 폰트 목록은 google fonts에서 찾거나?
expo 문서에 google font package에서 확인해도 되는 것 같다!

2. 설치한 패키지에서 useFonts와, 사용하고자 하는 폰트를 불러온다.

import AppLoading from 'expo-app-loading'
import { useFonts, CevicheOne_400Regular } from '@expo-google-fonts/ceviche-one';

AppLoading은, font가 load되지 않았을 경우에 Loading을 띄워주는 기능을 수행하는 요소인 듯!
공식 문서 예제 코드에 나와 있길래.. 그대로 사용해 보았다.

*필자의 경우에는, CevicheOne이라는 폰트를 사용해서, 두 번째 코드와 같이 import해 주었다.

폰트를 가져올 때, 중괄호 안에 어떤 식으로 써야 하는지는 expo의 google font packages에서, 쓰고자 하는 폰트의 디렉토리에 들어가면 예제 코드를 통해 알 수 있다!!


여기까지 왔다면 준비는 거의 마무리되었다!


3.useFonts hook을 넣고, 원하는 텍스트에 fontFamily로 스타일을 지정해주면 끝!

import React from 'react';
import {LinearGradient} from 'expo-linear-gradient'
import { StyleSheet, Text,} from 'react-native';
import AppLoading from 'expo-app-loading'
import { useFonts, CevicheOne_400Regular } from '@expo-google-fonts/ceviche-one'; 
//useFonts와 font 불러오기


export default function TestPage() { //함수 이름은 파일 이름과 같게!
    const [fontsLoaded] = useFonts({
        CevicheOne_400Regular,
    });

    if (fontsLoaded) {
    return (
        <LinearGradient style={styles.container} colors={['#5f0d80', '#7c22a1', '#c487de']} >
            <Text style={styles.test_font}>Ceviche One Test</Text>
        </LinearGradient> 
    )} //font가 잘 load되었다면, 화면 표시!
    else { //그렇지 않다면, loading...?
        return <AppLoading />
    }
}

const styles = StyleSheet.create({
    container: {
        flex:1,
        justifyContent:"center",
        alignItems:"center",
    },
    test_font: {
        fontFamily:'CevicheOne_400Regular', //fontFamily:'폰트이름'으로 스타일 지정!
        fontSize:40,
        color:'#fff'
    }
})

cf) 코드에 LinearGradient가 남아있는 것은..
그저 제가 배경이미지 그라데이션 넣는 것 이것저것 만져보다가 와서 그렇습니당..ㅎㅎ