반응형

모바일 프로그래밍 언어 6

React Native API 연동 쉽게 하는 방법 Fetch와 Axios 비교 - React Native #6

React Native로 앱을 개발할 때, 데이터 관리는 필수적입니다. 사실 거의 모든 응용서비스에서 필수죠. 이번에는 React에서 화면에 표시되는 텍스트, 숫자, 버튼의 상태 등은 모두 데이터이며, 이를 효과적으로 다루려면 상태 관리(State Management) 방법에 대해 정리해 보겠습니다.  데이터 처리와 API 연동  상태 관리(State Management)React Native로 앱을 만들다 보면 "데이터"라는 개념이 빠질 수 없어요. 화면에 보이는 숫자, 텍스트, 버튼의 상태 같은 것들이 바로 데이터인데, 이걸 잘 다루려면 상태 관리라는 기술을 알아야 합니다. 상태는 쉽게 말해 앱이 기억하고 있는 정보예요. 예를 들어, 버튼을 눌렀을 때 화면에 숫자가 1씩 늘어나게 하고 싶다면, 그 숫..

네비게이션과 화면 전환 React Navigation 설치부터 화면 이동까지 - React Native #5

이번에는 React Native에서 화면 간 전환을 효과적으로 구현하는 방법에 살펴봅니다. React Navigation을 활용한 내비게이션 구현 방법을 정리하고, Stack Navigator와 Tab Navigator 설정 및 활용 방법에 대해 살펴보겠습니다.  내비게이션과 화면 전환  React NavigationReact Navigation은 React Native에서 화면 간 이동을 쉽게 처리할 수 있도록 도와주는 라이브러리입니다. React Navigation을 사용하면 Stack Navigation, Tab Navigation, Drawer Navigation 등 다양한 방식으로 화면을 전환할 수 있습니다. React Navigation의 주요 내비게이션 방식Stack Navigator: 화면..

모바일 앱 개발을 위한 UI 구성과 스타일링 - React Native #4

이번에는 React Native의 Flexbox에 대해 살펴보고, 기본적인 UI 요소와 CSS까지 정리해 보도록 하겠습니다.  React Native로 간단한 UI 만들기  Flexbox와 CSSReact Native는 웹 기술과 유사한 스타일링 방식을 사용하지만, 핵심 레이아웃 시스템으로는 Flexbox를 채택합니다. Flexbox는 화면 크기가 달라져도 레이아웃이 유연하게 변하도록 돕는 체계입니다. 기존의 웹 CSS와 유사하지만, React Native에서는 div 대신 View라는 컴포넌트를 사용하고, 스타일은 객체 형태로 작성합니다.Flexbox인가: 모바일 환경에서는 다양한 기기 해상도와 화면 비율을 맞춰야 하므로 유연한 레이아웃 시스템이 필수적입니다. Flexbox는 아이템 크기 조절, 정렬,..

React Native의 컴포넌트, JSX, Props와 State - 모바일 앱 개발 초보자를 위한 React Native #3

이번에는 React Native의 기본 구조를 살펴보고, 입문자가 React Native 개발을 시작하는 데 필요한 기초를 다질 수 있도록 필요한 부분을 정리하려 합니다.React Native의 컴포넌트, JSX, Props와 State  React Native 주요 컴포넌트React Native는 컴포넌트(Component) 기반 개발을 중심으로 동작한다. 컴포넌트란 간단히 말해 UI를 구성하는 작은 단위의 블록입니다. 웹 개발에서 HTML 요소(예: , 등)를 사용하듯, React Native에서는 다양한 컴포넌트를 조합하여 앱의 UI를 구축합니다.   컴포넌트 기반 개발의 장점:재사용성(Reusability): 동일한 UI 요소를 여러 곳에서 사용할 수 있어 코드 중복을 줄일 수 있다.모듈화(Mo..

React Native 개발 환경 설정 - 모바일 앱 개발 초보자를 위한 React Native #2

이번에는 React native 관련 두 번째로 개발 환경 설정에 대해 정리해 보겠습니다.  React Native 개발 환경  React Native 개발을 위한 필수 도구React Native로 앱을 개발하려면 몇 가지 필수 도구를 설치해야 합니다. 기본적으로 JavaScript 런타임 환경과 모바일 개발을 위한 도구가 필요합니다. 도구 설명 Node.jsJavaScript 실행 환경, npm 패키지 매니저 포함npm 또는 yarnJavaScript 라이브러리 및 패키지 관리 도구Expo CLI ReactReact Native 앱을 손쉽게 개발할 수 있도록 돕는 프레임워크React Native CLIExpo보다 더 자유로운 개발 환경을 제공하는 CLIAndroid StudioAndroid 앱 개발을..

React Native란 - 모바일 앱 개발 초보자를 위한 React Native #1

이번부터는 모바일 앱 프로그래밍 언어에 대해 시작해 보려 합니다. iOS나 Android 플랫폼 각각에 전용됐던 프로그래밍 언어들이 얼마 전부터는 크로스플랫폼(Crossplatform)이라는 이름으로 하나의 프로그래밍 언어로 사용되게 되었죠. 오늘은 중 하나인 React Native라는 프로그래밍 언어에 대한 이야기를 시작하겠습니다.  모바일 앱 개발 초보자를 위한 React Native #1React Native는 2015년 페이스북(Meta)에서 처음 오픈소스로 공개된 모바일 앱 개발 프레임워크입니다. 원래 페이스북 내부에서는 ‘React’라는 웹용 라이브러리를 사용하여 빠르고 효율적인 사용자 인터페이스(UI)를 구성하고 있었는데, 이 React의 아이디어를 모바일 환경으로 확대해보고자 한 시도가 바..

반응형