[React Native] 4장 네비게이션 구현

1. React Native Navigation React Native에서 React Navigation을 사용하여 네비게이션을 구현하는 방법은 React Navigation 라이브러리를 설치해 사용할 수 있습니다. 아래 명령어로 라이브러리를 설치합니다.npm install @react-navigation/nativenpm install @react-navigation/native-stacknpm install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-viewnpm install --save-dev typ..

• format_list_bulleted React Native
• · 2025. 3. 25.
• textsms

[React Native] 3장 상태 관리

1. useStateuseState는 컴포넌트의 상태를 관리하는 데 사용됩니다. useState를 사용하는 방법은 아래와 같습니다.import React, { useState } from "react";import { Text, View, StyleSheet, Button } from "react-native";const Counter = () => { const [counter, setCount] = useState(0); const increment = () => { setCount(counter + 1); }; const decrement = () => { if (counter > 0) { setCount(counter - 1); } }; return ( ..

• format_list_bulleted React Native
• · 2025. 3. 4.
• textsms

[React Native] 2장 컴포넌트 구조 이해

1. 기본 프로젝트 구조프로젝트를 생성하면 기본 폴더 구조는 다음과 같습니다.MyExpoApp/├── assets/├── node_modules/├── App.js├── app.json└── package.json2. 기본 컴포넌트Viewreact-native를 제일 먼저 실행하면 보이는 곳은 app -> (tabs) -> index.tsx 부분입니다 이곳은 다음과 같이 수정합니다.import React from "react";import { View, StyleSheet } from "react-native";const App = () => { return ;};const styles = StyleSheet.create({ container: { flex: 1, justifyContent..

• format_list_bulleted React Native
• · 2025. 3. 3.
• textsms

[React Native] 1장 React Native란?

1. React Native란?React Native는 Facebook에서 개발한 오픈소스 프레임워크로, Javascript를 사용한 모바일 애플리케이션을 개발할 수 있는 언어입니다. iOS와 Android 플랫폼에서 네이티브 앱을 만들 수 있습니다. React Native의 특징은 아래와 같습니다.크로스 플랫폼: 한 번의 코드 작성으로 iOS와 Android에서 모두 실행 가능네이티브 컴포넌트: 네이티브 UI 컴포넌트를 사용하여 성능이 뛰어난 앱 개발Hot Reloading: 코드 수정 후 즉시 결과를 확인 커뮤니티 지원: 강력한 커뮤니티와 다양한 라이브러리, 도구 사용 가능Javascript 사용: 웹 개발자에게 친숙한 Javascript 언어 사용 2. React Native의 장단점장점개발 속도:..

• format_list_bulleted React Native
• · 2025. 3. 2.
• textsms