리소스(폰트, 이미지) 사용할 때 로딩 상태 체크하는 법 질문

리액트 네이티브 2/E
#1

안녕하세요!
custom font 써보다가 궁금한 점이 생겨서 질문 드려요 :smile:

expo 문서에서 custon font 사용 예제는 폰트 파일 불러왔는지 체크하기 위해 componentDidMount() 메서드를 사용했는데,
create-react-native-app으로 tab 템플릿 선택해서 프로젝트 만들면 lifecycle 없이 <AppLoading />이랑 state 활용해서 로드 완료 되었는지 확인하는 방식을 쓰더라고요.
(리덕스 사용하는 방법도 있었어요 Using Custom Fonts in Expo : The Best Way)

export default class App extends React.Component {
  state = {
    isLoadingComplete: false
  }

  render() {
    if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {
      return (
        <AppLoading
          startAsync={this._loadResourcesAsync}
          onError={this._handleLoadingError}
          onFinish={this._handleFinishLoading}
        />
      )
    } else {
      return (
        <View style={styles.container}>
          <Image source={Images.partyJpeg} // 리소스 준비 되면 보여주기
            style={{width: '10%', height: '10%', backgroundColor: '#fff'}} 
// ...

(코드 전체)

lifecycle 언제 쓰는지를 찾아보면 성능 향상을 위해 쓴다고 본 것 같은데, 실제로 써본 적이 없어서 이런 경우에는 어떻게 리소스 로딩 상태를 관리(?)를 하는게 좋을지 궁금해요.
또 <AppLoading /> 문서에 보면 _cacheResourcesAsync라고 메서드를 구현했는데 프로젝트에 assets로 넣은 리소스도 해당이 되는 걸까요? 아니면 url로 불러오는 리소스만 캐시로 저장되는지도 여쭤보아요 ㅎㅎ

좋아요 1
#2

우선…

질문하신 내용에 답하기 전에 몇가지 말씀드리자면,
저는 expo로 개발하고 있지 않습니다. :slight_smile: 그 이유는 앱을 만들다 보면 대부분 3rd party native 모듈을 사용하거나 직접 customzing한 native 모듈을 사용해아하는 경우가 발생하기 때문입니다.

Expo의 특징

expo에서는 개별로 빌드해서 넣은 앱이 아닌 expo앱에서 실행/테스트를 다 할 수 있어야하기 때문에 동적으로 불러오지 필요가 없이 앱에 포함해서 빌드할 수 있는 font까지 동적 로딩방식으로 비동기로 로딩하고 있어요.

그렇다보니 비동기로 폰트가 로딩되기 전에 화면을 그려버리면 해당 폰트가 적용안된채로 화면에 보여지겠죠. 사실 이미지는 화면에 영역만 잡아두고 그린다음에 로딩이 되면 해당 영역에 채워 넣는 건 너무나 당연하고 익숙한 UX이지만 폰트의 경우는 그렇지 않은 거죠. 폰트가 로딩되기전에 기본 폰트로 보여줬다가 나중에 폰트가 로딩되면 다시 화면을 그리는 것도 기술적으로 불가능한 건 아니지만 아이콘 폰트를 쓰는 경우를 생각해보면 기본 폰트에서는 깨져보일테니 바람직 하지 않겠죠.)

그래서 앱이 종료된 상태에서 실행될 때 font처럼 화면을 그리기 전에 미리 꼭 불러와하는 애들이 로딩되는 동안에 앱 첫 화면(스플래쉬)에 머물 수 있도록 해주는게 <AppLoading/> 컴포넌트가 하는일 같아보입니다.

create-react-app CLI(expo)를 이용하는 것과 react-native CLI를 이용하는 방법의 차이는 3장의 내용이기도 하니 이번주에 더 자세히 얘기 나눠봐요. :slight_smile:

좋아요 2
#3

와 바로 댓글 주셔서 감사합니다…! 첫수업도 참여할 수 있었으면 좋았을텐데, 이번주 수업에서 질문이 많을 것 같은 느낌이 듭니다 허허 그래도 디자인 넘기면 이렇게 구현되는구나 싶고 재밌네요 ㅎㅎ 그럼 수업 때 뵐게요 :smiley:

좋아요 1
#4

아주 좋은 느낌입니다. :+1:

좋아요 1