React Naitve, Expo 로컬 폰트 추가하기

프로젝트를 진행하다보면 로컬에 있는 폰트를 추가하고 싶을 때가 있다.
이럴 땐 어떻게 해야할까.

기본 세팅

yarn add expo-font react-native-asset

폰트를 불러올 라이브러리와, assets 폴더를 alias 해줄 준비를 하자.

module 설정

// react-native.config.js
...
module.exports = {
  	assets: ["./assets/fonts"]
}
...

assets를 불러올 수 있도록 config.js를 수정해주자

페이지에서 사용하기

// page.js
import { loadAsync } from 'expo-font';
import styled from 'styled-components';

const Page = () => {
		const [isFontReady, setReady] = useState(false);
		useEffect(() => {
        async function fetchFont(){
            await loadAsync({
                "NotoSansKR-Bold" : require('../assets/fonts/NotoSansKR-Bold.otf'),
                "NotoSansKR-Medium" : require('../assets/fonts/NotoSansKR-Medium.otf')
            });
            setReady(true);     
        }
        fetchFont();
	   }, []);

		return(
			{isFontReady && <TitleText>텍스트</TitleText>}
		)
}

const TitleText = styled(Text)`
	  font-family: NotoSansKR-Bold;
`

export default Page;

사용하고 싶은 페이지에서 useEffect와 마지막의 [] 를 통해서 페이지가 처음 로딩될 때만 fetchFont가 실행되도록 하고, 로드가 완료될 시에 isFontReady를 set 해주며 로딩이 끝났음을 알려준다.

경험상, 최상위 App.js에서 한 번 폰트를 로드해주면, 그 뒤로는 css 요소에서 바로 font-familiy로 불러올 수 있었던 것으로 기억한다.
매번 폰트를 로드하는 것보단 미리 로드하고 계속 쓰는 것이 더 효율적일 것이라 생각한다.