React Native

[React Native] 리액트 네이티브 차트 라이브러리 추천

웹이나 앱을 개발하다 보면 데이터를 예쁘게 차트로 시각화하고 싶은 경우가 생깁니다. 리액트 네이티브에도 다양한 차트 라이브러리가 존재합니다. ✔ 하지만 기업이 아닌 개인 사용자들이 만든 커뮤니티 라이브러리가 대부분이기 때문에 사용하기 전에 다운로드 수, 최근 업데이트 날짜 등을 잘 확인해야 합니다. 제가 사용해 보고 좋다고 생각한 차트 라이브러리 2가지를 추천해 드리겠습니다. 😀 1. react-native-chart-kit https://www.npmjs.com/package/react-native-chart-kit?activeTab=readme react-native-chart-kit If you're looking to **build a website or a cross-platform mobile..

[React Native] Error: Requiring module "node_modules\react-native-reanimated\src\index.ts” 에러 해결법

Drawer Navigation을 설치하다가 다음과 같은 에러가 발생했습니다. ERROR Error: Requiring module "node_modules\react-native-reanimated\src\index.ts", which threw an exception: Error: Failed to initialize react-native-reanimated library, make sure you followed installation steps here: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/ 1) Make sure reanimated's babel plugin is installed i..

[React] 자식 컴포넌트에서 부모 컴포넌트로 데이터 전달하기

State는 부모 → 자식으로 밖에 값을 전달하지 못한다고 배웠습니다. 하지만 컴포넌트를 분리했을 때 자식 컴포넌트에서 연산한 데이터를 부모에서 사용하고 싶은 경우가 있습니다. Redux 등 전역 상태관리 라이브러리를 사용하지 않고도 할 수 있는 방법을 찾았습니다.😀 함수를 전달하면 됩니다. 👍 📝 자식 컴포넌트 → 부모 컴포넌트 ⦁ 📑 부모 컴포넌트 //전달 함수 const [audio, setAudio] = useState({}) const getAudio = (x) => { setAudio(x) } //return 문 ... //state 넘기듯이 함수도 넘길 수 있습니다. ✔ 자식 컴포넌트에 전달할 함수를 선언합니다. 해당 함수를 자식에서 사용하면 결과적으로는 부모 컴포넌트의 State가 변경되어..

[React Native] 리액트 네이티브 Expo Audio 녹음, 재생 구현하기

Expo에서 오디오 녹음 및 재생을 구현할 수 있는 Audio라는 Expo SDK를 지원합니다. 저는 프로젝트에 음성 일기를 구현하기 위해 사용했습니다. 공식 문서에 예제 코드가 잘 나와있지만, 저는 이런저런 에러로 꽤나 고생했습니다. 😂 📝Audio https://docs.expo.dev/versions/v47.0.0/sdk/audio/ Audio - Expo Documentation Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React. docs.expo.dev ✔ Usage에 예제 코드가 잘 나와있습니다. Open In Snack 눌러서 ..

[React Native] 리액트 네이티브 코드 적용 안되는 이슈 해결 (캐시 초기화)

리액트 네이티브 개발을 하다가 앱이 너무 느려진다거나, 소스 코드를 변경해도 적용이 안되는 이슈를 겪게 되었습니다. 에러 메시지도 보여주지 않기 때문에 해결하기 굉장히 힘들었습니다. 🤦‍♂️🤷‍♂️ 결국 Stack Overflow의 도움을 받아 해결하게 되었습니다! https://stackoverflow.com/questions/40985027/unable-to-resolve-module-in-react-native-app Unable to Resolve Module in React Native App I'm getting an error in React Native saying it can't resolve a module. It's saying a certain folder doesn't exist ..

[React Native] 리액트 네이티브 Navigation 사용하기 (라우팅)

리액트 네이티브에서 가장 많이 사용되는 라이브러리 중 하나인 React Navigation을 활용해서 하단 탭 바를 구현해 보겠습니다. 리액트의 라우터를 사용하는 것과 비슷합니다. 📝 공식 문서 ✔ 공식 문서에 예제 코드가 나와있으니 따라 해 봅시다. 😀 https://reactnavigation.org/docs/getting-started/ https://reactnavigation.org/docs/getting-started/ reactnavigation.org ⦁ 설치하기 npm install @react-navigation/native or yarn add @react-navigation/native //Expo 사용 시 npx expo install react-native-screens reac..

[React Native] 리액트 네이티브 안드로이드 실행 방법 (Open Android)

QR코드를 Expo 앱에서 스캔하여 리액트 네이티브를 실행시킬 수도 있지만, 안드로이드 스튜디오를 설치하고 Virtual Device를 생성하면 컴퓨터에서도 모바일 안드로이드 화면을 확인할 수 있습니다. 개발하기 편리하겠죠? 😀 📝 설치 방법 ⦁ Failed to resolve the Android SDK path. 안드로이드 스튜디오를 설치하지 않아서 발생하는 에러입니다. 리액트 네이티브의 open Android 명령어를 실행하려면, 먼저 안드로이드 SDK을 설치하고, 가상 디바이스를 생성해야합니다. https://developer.android.com/studio?gclid=Cj0KCQjw48OaBhDWARIsAMd966DMyOfxDlPjoseRaqwTyh4qSqyyum5xe8CW5CdZ7wl4Ox8..

[React Native] 리액트 네이티브 To Do 앱 만들기 (AsyncStorage, Map)

https://nomadcoders.co/react-native-for-beginners 왕초보를 위한 React Native 101 – 노마드 코더 Nomad Coders React Native로 2개의 앱 만들기 nomadcoders.co 프로젝트를 하면서 앱을 개발해야 하는 일이 생겨서 니꼬 선생님의 강의를 듣고 React Native를 사용해 To Do 앱을 만들었습니다. Expo를 사용하면 환경 설정이 간단하고 제공해 주는 API, 컴포넌트들이 많아서 쉽고 빠르게 개발이 가능합니다. 📝 To Do 앱 ⦁ 🧾 기능 1. To Do List / 여행 리스트 추가 삭제 2. 체크박스 선택 시 텍스트 줄긋기 및 색 변경 ( 완료 체크 ) 3. AsyncStorage 사용 ( Local Storage 비..