[React Native] 크립토 앱 튜토리얼

양동준 님의 "만들면서 배우는 리액트네이티브 - 크립토 앱"을 실습해 보면서 기억해둬야 할 내용을 작성해 보았다. 기록된 내용은 영상에서 얻은 정보도 있지만-영상에 없는-검색을 통해 얻은 정보도 있다.

😉 참고한 영상 : https://youtu.be/sbTih9S8wNw?feature=shared

---

1. 프로젝트 실행 명령

-c 옵션을 이용하면 실행하면서 캐시를 삭제할 수 있다. Android Virtual Device(AVD)를 사용하면서 오작동을 많이 경험했다. 캐시를 삭제하면서 실행하는 방식과 함께 개발하지 않을 때는 프로젝트를 종료시켜 두는 것으로 오작동을 줄 일 수 있었다.

npx expo start -c

---

2025-02-12 추가

😉 expo 프로젝트 생성 : https://docs.expo.dev/tutorial/create-your-first-app/

위 링크의 예제와 같이 아래 명령어로 실행하면 TypeScript도 함께 설치되었다.

npx create-expo-app@latest StickerSmash

TypeScript를 사용하지 않고자 한다면 아래의 명령어로 프로젝트를 생성하면 된다(--template blank 옵션 추가).

npx create-expo-app --template blank StickerSmash

---

 

2. 반응형 UI

UI 요소를 완전히 반응적으로 코딩할 수 있도록 2가지 간단한 방법을 제공하는 작은 라이브러리, 미디어 쿼리를 사용하지 않아도 된다. wp(), hp()를 이용해 화면 비율로 UI 요소를 제어할 수 있어서 매우 편리하다.

npx expo install react-native-responsive-screen

 

3. 아이콘 

expo에서 제공하는 아이콘을 편리하게 사용할 수 있다.

npm i @expo/vector-icons

😉 아이콘 검색 페이지 : https://icons.expo.fyi/Index

 

4. 캐로우셀

npx expo install react-native-pager-view

 

 

5. 차트

주식에서 사용하는 캔들 차트가 제공되고 있었다.

npm install react-native-wagmi-charts

😉 react-native-wagmi-charts : https://www.npmjs.com/package/react-native-wagmi-charts

 

검색을 통해 다른 차트도 발견했는데 일반적으로 사용하기에 좋아 보였다.

npx expo install react-native-gifted-charts expo-linear-gradient react-native-svg

 

😉 react-native-gifted-charts : https://www.npmjs.com/package/react-native-gifted-charts

 

6. toPrecision, toFixed의 차이

전자는 수의 길이 제한, 후자는 소수점 자릿수 제한한다. 영상에서는 소수점 2자리까지 표현하기 위해 toPrecision를 사용했는데 toFixed가 의도에 더 맞다고 생각했다.

 

7. Troubleshooting

7.1. FlatList 스크롤 안될 경우

부모 스타일 속성에 flex: 1 추가한다.

 

7.2. ERROR Invariant Violation: "main" has not been registered.

Error: Exception in HostFunction: expected 0 arguments, got 1, js engine: hermes
ERROR Invariant Violation: "main" has not been registered. This can happen if:

실습 중 차트 라이브러리를 추가하면서 위와 같은 에러를 만나게 되었다. 해결 방법은 react-native-reanimated를 설치하고 babel.config.js 파일에 plugin을 추가하면 된다.

npx expo install react-native-reanimated

// babel.config.js
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: ["react-native-reanimated/plugin"], // 추가
  };
};

😉 참고한 자료 : https://velog.io/@bje0416/ERROR-Invariant-Violation-main-has-not-been-registered