React Native - 외부글꼴 사용 및 전역 색상관리하기

리액트 네이티브 앱을 개발할 때 앱 전반의 글꼴 (Font) 과 색상 (Color) 을 설정하는 방법에 대해 알아보겠습니다.

 

1.  외부 글꼴(폰트) 사용하기

핸드폰의 기본 글꼴을 사용해도 괜찮지만 개인별 폰트 설정에 따라 화면에 보이는 글씨가 달라지므로 원래 보여주고자 하는 화면 디자인을 보여주기 어려운 상황이 되기도 합니다.

 

이러한 경우를 방지하기 위해 앱의 사용 글꼴을 지정하여 사용함으로써 디자인의 일관성을 유지할 수 있습니다.

• 외부 글꼴로 Expo Font 사용하기
  • 설치 : $expo install expo-font
  • 앱 초기 구동시 글꼴을 불러와야 하므로 app.js 내에서 사용
  • 폰트 복사
    • assets/fonts 폴더에 사용할 폰트 위치
  • 폰트 불러오기
    • useFonts hook 사용
    • 사용할 폰트명 지정하고 require 로 해당 폰트를 불러 옴
  • app.js 예시

import { useFonts } from 'expo-font';
import * as SplashScreen from 'expo-splash-screen';
import { useEffect } from 'react';
import { Text, View, StyleSheet } from 'react-native';

SplashScreen.preventAutoHideAsync();

export default function App() {
  const [loaded, error] = useFonts({
    'Inter-Black': require('./assets/fonts/Inter-Black.otf'),
  });

  useEffect(() => {
    if (loaded || error) {
      SplashScreen.hideAsync();
    }
  }, [loaded, error]);

  if (!loaded && !error) {
    return null;
  }

  return (
    <View style={styles.container}>
      <Text style={{ fontFamily: 'Inter-Black', fontSize: 30 }}>Inter Black</Text>
      <Text style={{ fontSize: 30 }}>Platform Default</Text>
    </View>
  );
}

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

🖐🏻 폰트를 불러오는데 시간이 소요되므로 앱 초기 로딩시 빈 화면이 보이지 않도록 Splash Screen 을 사용

 

https://docs.expo.dev/versions/latest/sdk/font/

Font

 

2.  앱 전역 색상 관리하기

앱내 Text , Icon, Button, Background 등 다양한 컴포넌트에서 다양한 색상이 필요합니다.

앱의 UI 의 일관성 유지를 위해 화면설계시 기본 색상을 지정하고 개발하는 것을 추천합니다.

 

• src 폴더 하위에 constanst 폴더 생성하고 colors.js 파일 생성
• colors 파일에 각 컴포넌트에서 사용하는 색상을 객체로 생성하고 export 하여 다른 컴포넌트에서 불러와서 사용

const Colors = {
  primary500: "#72063c",
  primary600: "#640233",
  primary700: "#4e0329",
  primary800: "#3b021f",
  accent500: "#ddb52f",
};

export default Colors;

 

• 예시로 버튼 컴포넌트에서 사용하기 

import { View, Text, Pressable, StyleSheet } from "react-native";
import Colors from "../../constants/colors";

function PrimaryButton({ children, onPress }) {
  return (
    <View style={styles.buttonOuterContainer}>
      <Pressable
        style={({ pressed }) =>
          pressed
            ? [styles.buttonInnerContainer, styles.pressed]
            : styles.buttonInnerContainer
        }
        onPress={onPress}
        android_ripple={{ color: Colors.primary600 }}
      >
        <Text style={styles.buttonText}>{children}</Text>
      </Pressable>
    </View>
  );
}

export default PrimaryButton;

const styles = StyleSheet.create({
  buttonOuterContainer: {
    borderRadius: 28,
    margin: 4,
    overflow: "hidden",
  },
  buttonInnerContainer: {
    backgroundColor: Colors.primary500,
    paddingVertical: 8,
    paddingHorizontal: 16,
    elevationL: 2,
  },
  buttonText: {
    color: "white",
    textAlign: "center",
  },
  pressed: {
    opacity: 0.75,
  },
});

 

Colors 컴포넌트에서 색상을 불러와서 사용하며 지정한 색상리스트가 자동생성으로 표출되므로 코딩하기도 편합니다.

color 전역 관리