[React Native] 구글폰트(google font) 사용하기

React Native Google font

 React Native에서 구글 폰트를 사용하여 어플을 꾸미는 방법에 대해 알아보자. 글꼴을 변화시키면 어플 전체의 분위기가 변경되기 때문에 중요한 부분이라고 할 수 있다. 사용법은 굉장히 간단하다.

 

 

 

기본 환경

react native의 환경은 아래와 같은 환경이다.

$ npx create-react-native-app

 

 

설치

 우선 아래의 명령어로 @expo-google-fonts/inter 패키지를 설치해 준다.

$ expo install @expo-google-fonts/inter expo-font

 

 

폰트 적용 전 코드

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to stgz on your app!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

위의 코드는 매우 기본적인 것만 들어 있는 코드이다. 위의 코드를 기준으로 google font를 적용해 보자.

 

 

사용할 폰트 찾기

아래의 사이트로 가서 사용할 폰트를 찾는다. 아래의 사이트는 구글 폰트의 코드를 react-native에서 쉽게 사용할 수 있도록 만들어 놓은 것이라 할 수 있다. (구글 폰트에서 새롭게 추가한 최신 폰트는 아직 적용이 안되고 있다.)

https://directory.vercel.app/

Directory | by AtilaDev

 

나는 여러 폰트 중에 Canin Sketch라는 폰트를 사용한다고 가정을 하고 글을 적어보겠다. 오른쪽에 나와있는 아래의 코드를 복사한다. 그리고 @expo-google-fonts/cabin-sketch로부터 코드를 가지고 오기 때문에 추가로 패키지를 설치해 준다.

 

import { 
  CabinSketch_400Regular,
  CabinSketch_700Bold 
} from '@expo-google-fonts/cabin-sketch'

$ expo install @expo-google-fonts/cabin-sketch

 

여기까지 하면 기본적인 설치와 세팅은 끝난 거라 할 수 있다. 

 

 

코드 로직

기본적으로 다음과 같은 순서로 react native에서 font를 불러오는 순서라고 할 수 있다. 기본적인 컨셉은 화면의 글자에 font를 적용하기 위해 font를 다운로드하여야 한다. 따라서 다운이 진행 되기 전까지 대기했다가, font를 import 후에 글자에 적용이 된 이후에 대기를 풀면 된다. 이때 우리는 <AppLoading /> 을 사용한다. <AppLoading /> 이 생소하다면, 아래의 url을 보고 개념을 익히고 오자. fontend에서 render 시기에 대한 개념은 매우 중요하기 때문이다.

 

 [React-native] AppLoad 로딩 페이지 만들기

 

1. <AppLoading /> 태그를 통해, font가 로딩이 될 때까지 기다려준다.
2. useFonts로 내가 가져온 font들의 로딩 완료를 확인한다.
3. 완료 시 font를 css의 fontfamily로 적용한다.

import AppLoading from 'expo-app-loading';
import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { useFonts } from '@expo-google-fonts/inter';
import { 
  CabinSketch_400Regular,
  CabinSketch_700Bold 
} from '@expo-google-fonts/cabin-sketch'

export default function App() {
  let [fontsLoaded] = useFonts({
    CabinSketch_400Regular,
    CabinSketch_700Bold,
  });

  if (!fontsLoaded) {
    return <AppLoading />;
  }
  return (
    <View style={styles.container}>
      <Text style={{fontFamily: 'CabinSketch_700Bold', fontSize: 40}}>
        Open up App.js to stgz on your app!!
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

 

위와 같이 적용을 완료하면 아래와 같이 폰트가 변화 된 것을 확인할 수 있다.

 

 

 

이제 여러가지 다양한 폰트를 적용해 보자.