대외활동/멋쟁이사자처럼_프론트엔드 12기37 REACT NATIVE 스터디. 2주차 6단원. Hooks DRACONIST React Hook은 React 버전 16.8부터 도입된 개념으로, 함수형 컴포넌트에서 상태(state) 및 생명주기 관련 기능을 사용할 수 있도록 하는 기술입니다.이전에는 클래스 컴포넌트에서만 상태 및 생명주기 관련 로직을 다룰 수 있었지만, Hook을 사용하면 함수형 컴포넌트에서도 이러한 기능을 간편하게 활용할 수 있게 되었습니다.1. useStateState는 컴포넌트의 상태를 나타내며, 컴포넌트가 렌더링 되는 동안 변할 수 있는 데이터(동적인 상태) 를 포함합니다. State는 주로 사용자 입력, 외부 데이터 가져오기, 컴포넌트의 상태 변화 등을 처리하는 데 사용됩니다. useState는 매개변수로 초기값을 받고, 상태 변수와 그 상태를 수정할 수 있는 세터 함수를 배열 형태로 반환합니다.우리는 .. 2025. 1. 23. REACT NATIVE 스터디. 2주차 5단원. 할일 관리 애플리케이션 만들기 DRACONIST 1. expo프로젝트 만들기1.expo 프로젝트 생성npx create-expo-app react-native-todo 글로벌 expo-cli 패키지가 더 이상 사용되지 않기 때문에 expo init react-native-todo가 아닌 위의 명령어를 사용하여야 합니다. 이렇게 하면 app/(tabs)/index.tsx가 홈화면으로 설정됩니다.참고자료) Create your first appIn this chapter, learn how to create a new Expo project.docs.expo.dev 2. styled-components 라이브러리와 prop-types 라이브러리 설치cd react-native-todonpm install styled-components prop-typ.. 2025. 1. 23. REACT NATIVE 스터디. 1주차 4단원 스타일 DRACONIST 1. 스타일링1) 인라인 스타일import React from 'react';import { View, Text } from 'react-native';const App = () => { return ( Inline Styling - Text Inline Styling - Error );};export default App; 2) 클래스 스타일import React from 'react';import { StyleSheet, View, Text } from 'react-native';const App = () => { return ( Inline Styling - Text Inline Styl.. 2025. 1. 16. REACT NATIVE 스터디. 1주차 3단원. 컴포넌트 DRACONIST 1. JSX컴포넌트는 가상 DOM을 구성하는 조립블록입니다. 재사용이 가능한 화면 UI요소이므로 잘 이용하면 사용자 편의를 상승시키고 개발도 편하게 할 수 있습니다.import React from "react";import {View, StyleSheet, Text, StatusBar} from 'react-native';const App = () => { return ( My First React Native )}const styles = StyleSheet.create({ container: { flex:1, justifyContent: 'center', alignItems: '.. 2025. 1. 16. REACT NATIVE 스터디. 1주차 2단원. 리액트 네이티브 환경설정 DRACONIST 1. 설치윈도우는 Node.js, JDK, 안드로이드 스튜디오, python 2. Expo 프로젝트 만들기 //expo-cli 설치npm install --global expo-cli//프로젝트 생성npx create-expo-app my-first-expo cd my-first-exponpm start 이제 해당 로그에 뜨는 qr코드로 접속하거나 localhost 경로로 접속할 수 있습니다. 스마트폰으로 접속한 경우, 핸드폰을 흔들면 개발자 메뉴를 볼 수 있습니다. 새로운 Expo 버전이 나오면서 시작 프로젝트 모습이 변경되었습니다. 그래서 App.js가 없습니다. 참고) React Native expo 시작하기React Native expo를 통해서 시작할 때 설치하는 방법과 expo go를 이.. 2025. 1. 16. REACT NATIVE 스터디. 1주차 1단원. React Native란? DRACONIST 1. 리액트 네이티브의 시작2015년 페이스북에서 공개한 오픈소스 프로젝트로,React 기반으로 iOS와 안드로이드에서 동작하는 네이티브 모바일 애플리케이션의 자바스크립트 프레임워크 입니다.이외에도 Windows, macOS등을 공식 지원하고 있고 웹이나 타이젠 등 비공식적으로 지원하는 플랫폼까지 합치면 거의 모든(windows phone, 리눅스 제외) 플랫폼을 지원합니다. 따라서 크로스 플랫폼이 가능하다는 장점을 가지 고 있고, App Store 심사 없이 UI와 function을 업데이트 할 수 있는 Code Push기능을 지원하는 유일한 라이브러리입니다. 2. 리액트 네이티브의 장점과 단점1) 리액트에 익숙한 개발자라면 아주 빠르게 배울 수 있다.이전에는 앱 애플리케이션을 만들기 위해 Object.. 2025. 1. 15. 이전 1 2 3 4 5 6 7 다음
