RN Guide

React Native 앱을 개발할 때, 데이터를 어떻게 저장할 것인지는 중요한 결정 요소입니다. 데이터 저장 방식에 따라 앱의 성능과 사용자 경험이 크게 달라질 수 있습니다. 이번 글에서는 로컬 저장 vs. 클라우드 저장의 개념을 비교하고, React Native에서 활용할 수 있는 대표적인 방법을 소개하겠습니다.1. 데이터 저장 방식 비교: 로컬 vs. 클라우드  저장 방식 특징 장점 단점 로컬 저장기기 내부에 데이터 저장네트워크 없이 빠르게 접근 가능데이터 손실 위험, 동기화 어려움클라우드 저장원격 서버에 데이터 저장여러 기기에서 동기화 가능, 데이터 백업 가능인터넷 연결 필요, API 호출로 성능 저하 가능2. React Native에서 사용 가능한 로컬 저장 방법✅ AsyncStorage ..

안녕하세요! 이번 글에서는 React Native에서 네트워크 요청을 최적화하는 방법을 다뤄보겠습니다.처음에는 API 요청을 그냥 fetch나 axios로 하면 끝이라고 생각했어요.작은 프로젝트에서는 큰 문제가 없었죠.그런데 앱이 커지고 네트워크 요청이 많아지면서, 로딩 속도가 느려지거나 같은 데이터를 여러 번 요청하는 비효율적인 상황이 생겼어요.특히, 사용자가 스크롤을 빠르게 내릴 때마다 새로운 요청이 발생하거나, 네트워크가 불안정할 때 앱이 멈추는 문제도 경험했어요.그래서 이번 글에서는 네트워크 요청을 최적화하는 다양한 방법(캐싱, 로딩 처리, 성능 개선)을 정리해보겠습니다.1. 불필요한 API 요청 줄이기네트워크 요청이 많아지면 앱 성능이 떨어질 수밖에 없습니다.특히, 같은 데이터를 여러 번 요청하..

안녕하세요! 이번 글에서는 React Native에서 외부 API와 통신하는 방법을 다뤄보겠습니다.앱을 만들다 보면 서버에서 데이터를 가져오거나, 사용자 입력을 서버로 보내야 하는 경우가 많습니다.처음 React Native에서 데이터를 불러와야 할 때, "fetch만 사용하면 되겠지"라고 생각했어요. 기본적인 사용법은 정말 간단했죠. 하지만, 프로젝트가 커지면서 에러 처리나 응답 시간 관리 같은 부분이 필요해지더라고요.그러면서 자연스럽게 axios도 사용하게 됐고, 확실히 더 편리한 부분이 많다는 걸 느꼈어요.이 글에서는 React Native에서 API 요청을 다루는 기본 개념과 fetch, axios를 활용하는 방법을 정리해보겠습니다.1. API 요청이란? 왜 필요한가?📌 **API(Applica..

안녕하세요! 이번 글에서는 React Native에서 상태(state)를 관리하는 방법을 다뤄보겠습니다.앱을 만들다 보면 사용자의 입력을 저장하거나, API에서 데이터를 불러와 화면에 반영해야 하는 경우가 많습니다.처음 React Native를 사용할 때는 그냥 변수에 값을 저장하면 될 거라고 생각했는데, 화면이 제대로 업데이트되지 않더라고요.이게 바로 React의 핵심 개념인 "상태 관리" 때문이었습니다.이 글에서는 React Native에서 상태(state)를 관리하는 기본적인 방법인 useState와 useEffect를 활용하는 법을 정리해보겠습니다.1. 상태(state)란? 왜 필요한가?📌 **상태(state)**는 컴포넌트의 데이터를 저장하고, 값이 변경될 때 자동으로 화면을 업데이트해주는 역..

안녕하세요! 이번 글에서는 React Native에서 리스트 형태의 데이터를 화면에 표시하는 방법을 다뤄보겠습니다.모바일 앱을 만들다 보면 리스트 형태의 데이터를 화면에 표시해야 할 일이 많습니다.처음 React Native를 사용할 때, 웹에서 map()을 이용해 리스트를 그리듯이 하면 될 줄 알았는데, 실제로는 성능 문제가 발생했습니다. 특히, 데이터가 많아질수록 앱이 느려지고, 스크롤이 버벅이더라구요.React Native는 웹과 다르게 네이티브 환경에서 동작하기 때문에 ScrollView와 FlatList 같은 최적화된 리스트 컴포넌트를 사용해야 합니다. 이 글에서는 ScrollView와 FlatList의 차이점, 그리고 언제 어떤 방식을 선택해야 하는지 정리해보겠습니다.1. ScrollView란..

1. React Navigation이란?React Native에서 여러 개의 화면을 이동하는 기능을 구현하려면 React Navigation 라이브러리를 사용해야 합니다.처음 React Native를 공부할 때, 저는 화면 이동을 window.location.href처럼 단순하게 하면 되지 않을까 생각했어요. 하지만, React Native는 웹이 아니라 모바일 앱이기 때문에 네이티브 스타일의 네비게이션을 구현해야 했죠. 📌 React Navigation은 다음과 같은 장점을 가집니다.✅ 네이티브 앱과 유사한 화면 전환 효과 제공✅ Stack, Tab, Drawer 등 다양한 내비게이션 방식 지원✅ iOS & Android에서 동일한 방식으로 작동 React Native 공식 문서에서도 React Na..

안녕하세요! 이번 글에서는 React Native에서 기본적인 UI를 구성하는 방법을 설명하겠습니다.React Native를 처음 접했을 때, 저는 "JSX 문법을 사용하는데, HTML이랑 비슷하면서도 다르네?" 라는 생각을 했어요. 특히 스타일링 방식이 웹과 달라서 처음에는 혼란스러웠습니다. 하지만 몇 가지 규칙만 익히면 네이티브 앱처럼 UI를 구성할 수 있다는 점이 굉장히 매력적이었어요.이 글에서는 React Native의 기본 UI 컴포넌트와 스타일링 방법을 정리하고, 초보자들이 쉽게 따라 할 수 있도록 예제도 포함했습니다. 😊1. React Native에서 UI를 구성하는 기본 개념React Native에서 화면을 구성하는 요소들은 컴포넌트(Component) 라고 합니다.웹 개발을 해본 경험이..

안녕하세요! 이번 글에서는 React Native 개발을 시작하기 위한 환경 설정 방법을 자세히 설명드리겠습니다. React Native는 크로스 플랫폼 앱 개발을 위한 강력한 도구이지만, 환경 설정 과정이 처음에는 다소 복잡할 수 있습니다. 이 가이드를 따라 차근차근 설정해보세요!1. 개발 환경 설정을 시작하기 전에React Native를 시작할 때 가장 어려웠던 부분이 환경 설정이었어요.React Native는 Expo를 사용하면 쉽게 설치할 수 있지만, React Native CLI를 사용하면 네이티브 환경(Android Studio, Xcode 설정)이 필요합니다.저는 처음에 Expo를 선택했는데, 이유는 설정이 간단하고 바로 실행할 수 있기 때문이었습니다. 네이티브 개발을 고려한다면 CLI 방식..

1. React Native 소개React Native는 Facebook에서 개발한 오픈 소스 크로스 플랫폼 애플리케이션 프레임워크입니다. 저는 처음 React Native를 접했을 때 "한 번의 코드로 iOS와 Android 앱을 만들 수 있다니, 정말 편하겠다!" 라고 생각했어요.하지만 막상 시작해보니, 네이티브 개발과는 다른 점이 많았고, 환경 설정부터 헷갈리는 부분이 많았죠. 그래서 이 블로그를 통해 React Native를 배우면서 겪었던 시행착오와 실전 팁을 공유하려고 합니다.2. 크로스 플랫폼 개발 vs 네이티브 개발React Native는 크로스 플랫폼 개발을 지원하는 프레임워크입니다. 저는 처음에 네이티브 개발(Android/Kotlin, iOS/Swift)과 비교하면 성능이 떨어지는 게..