k1212gh 님의 블로그

📌 [스나이퍼팩토리] 한컴AI - React Native Navigation 개념 및 활용 🚀 React Native에서 화면 이동을 관리하는 Navigation 개념과 실습 학습📖 학습 목표✅ React Navigation 개념과 종류 이해✅ Stack / Tab / Drawer Navigation의 원리 및 활용법 학습✅ Nested Navigation(중첩 내비게이션) 설계 방법 터득1️⃣ Navigation 개념과 중요성✔️ Navigation(내비게이션)이란?Navigation이란 앱에서 화면 간 이동을 가능하게 하는 시스템입니다.📌 왜 중요한가?✔️ 사용성 (Usability) → 직관적인 화면 흐름 제공 → 사용자 만족도 증가✔️ 데이터 전달 → 화면 간 params를 통해 필요한 데..

📖 학습 목표상태(State)의 개념과 중요성 이해useState 훅을 활용한 상태 관리 학습React Native에서 이벤트 핸들링 적용상태 변경과 이벤트 처리를 효과적으로 결합1️⃣ React Native의 상태(State) 개념✔️ 상태(State)란?**상태(State)**란 컴포넌트 내부에서 관리하는 동적인 데이터입니다.✔️ 사용자의 입력, 네트워크 응답, UI 변경 등에 따라 변경될 수 있음✔️ React Native에서 useState 훅을 사용하여 관리📌 상태(State) vs. Props(속성)구분 State (상태) Props (속성)변경 가능 여부변경 가능 (setState)변경 불가능 (읽기 전용)데이터 흐름컴포넌트 내부에서 관리부모 → 자식으로 전달사용 예시카운터 값, 사용자 ..

📖 학습 목표React Native에서 스타일링하는 방법 이해레이아웃을 구성하는 Flexbox 개념 학습반응형 디자인 및 스타일링 최적화 기법 익히기1️⃣ React Native의 스타일링 개념✔️ 스타일링의 중요성스타일링은 앱의 UI/UX 품질을 결정하는 중요한 요소입니다.가독성, 일관성, 유지보수성을 고려하여 올바른 스타일을 적용하는 것이 중요합니다.📌 React Native 스타일링의 특징✅ CSS와 유사하지만 CamelCase 문법 사용✅ StyleSheet API 활용하여 성능 최적화 가능✅ Flexbox 기반의 레이아웃 구조📌 React Native 스타일 적용 방식인라인 스타일Hello React NativeStyleSheet API 사용 (권장)import { StyleSheet, T..

📌React Native 기본 구성 요소 🚀 React Native의 기본 구성 요소와 컴포넌트 개념 정리📖 학습 목표React Native 컴포넌트 개념과 사용법 이해JSX 문법과 Props 개념 학습Expo의 역할과 프로젝트 구조 분석1️⃣ React Native 컴포넌트란?React Native에서는 모든 화면 요소(UI)가 컴포넌트로 구성됩니다.즉, 버튼, 텍스트, 입력 필드, 이미지 등 모든 요소가 컴포넌트입니다.✔️ React Native 컴포넌트의 특징✅ 재사용 가능 → 한 번 만든 컴포넌트를 여러 번 사용할 수 있음✅ 독립적인 상태와 속성(props) 보유 → 부모 컴포넌트에서 자식 컴포넌트로 데이터 전달 가능✅ 웹과 다름 → HTML과 유사하지만, 실제 네이티브 UI로 렌더링됨📌 ..

📌 [스나이퍼팩토리] 한컴AI - React Native 개념 및 개발환경 셋팅 (Day 1)🚀 React Native란? 웹 기술로 네이티브 모바일 앱을 개발하는 방법📖 학습 목표React Native의 개념과 동작 원리 이해개발환경 및 필수 도구 설치React Native의 생태계와 활용 방법 파악1️⃣ React Native란?React Native(RN)는 JavaScript와 React의 개념을 확장하여 iOS/Android 네이티브 앱을 개발할 수 있는 프레임워크입니다.기존에는 Swift(Kotlin), Java 등의 네이티브 언어를 사용해야 했지만, 웹 개발 경험을 모바일 개발로 확장할 수 있도록 도와줍니다.✔️ React Native의 탄생 배경💡 Facebook(메타)의 내부 필요..

보호되어 있는 글입니다.

[스나이퍼팩토리] 한컴AI아카데미 - React Native로 To-Do 앱 변환하기안녕하세요! 😊 이번 블로그에서는 기존에 React로 구현한 To-Do 앱을 React Native로 변환한 과정을 정리해 보려고 합니다.1. 개념 정리 - React vs React Native 차이점React와 React Native는 기본적으로 React의 컴포넌트 기반 개발 방식을 공유하지만, 차이점이 존재합니다.📌 React vs React Native 주요 차이점React (웹) React Native (모바일)렌더링HTML, CSS 사용Native UI 컴포넌트 사용스타일링CSS, Styled-ComponentsStyleSheet 또는 styled-components/native네비게이션React Rout..