게으름을 위한 부지런한 게으름뱅리' 블로그

Map 반복되는 data를 그릴때 사용 순차적으로 순회 후 return 배열의 길이 만큼 return 각각의 item들은 unique한 key가 있어야 한다. export default (props) => { return ( //showsVerticalScrollIndicator :스크롤 바 감추기 //contentContainerStyle : 맨아래로 스크롤 했을 경우 아래가 잘리지 않고 보임 {/* Map에서 key를 설정해주지 않으면 경고, key는 최상단 root 컴포넌트에 있어야 한다 */} { props.data.map((item, index) => ( )) } ) }

Expo에서 제공하는 기본 Icon 사용 https://icons.expo.fyi/ @expo/vector-icons directory icons.expo.fyi 1. 위 페이지 접속 후 원하는 Icon을 검색 2. 검색 후 원하는 Icon을 선택하여 복사해서 사용 3. 소스코드에 적용하기 import { Ionicons } from '@expo/vector-icons'; const IconButton = (props) => { return ( ); }

화면을 그릴때 View영역이 StatusBar 영역과 겹치는 현상이 발생. 안드로이드에서만 SafeAreaView가 정상적으로 동작하지 않음. OS에 따라서 Padding을 주어 해결. export default function App() { return ( ); } react-native-safe-area-context react-native-safe-area-context를 설치하면 OS구분 없이 정상 동작하는걸 확인가능 설치하기 yarn add react-native-safe-area-context 사용하기 import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context'; export default function App..

custom Hook은 "use"라는 prefix가 붙어야한다. import React, {useState} from "react"; import { TextInput, View, Button, ProgressViewIOSComponent } from "react-native"; const InputBox = (props) => { return ( ) } const useInput = (initialValue) => { const [value, setValue] = useState(initialValue); const resetValue = () => setValue(initialValue); return { value, setValue, resetValue,} } const CustomHook = ()..

♩ useState 함수형 component에서 사용하는게 편하다 가독성 및 코드의 길이가 줄어듬 state상태에는 어떠한 상태라도 들어감 const [count, setCount] = useState(0); const [isOn, setIsOn] = useState(false); const [name, setName] = useState(""); ... setCount(count+1)} /> { setIsOn(v); } } /> { setName(v); } } /> ♩ 클래스 컴포넌트의 생명주기 순서 최초 : Constructor -> render -> componentDidMount 변경: render -> componentDidUpdate 제거 : componentWillUnmount compone..

Core Components 공식 문서 https://reactnative.dev/docs/components-and-apis Core Components and APIs · React Native React Native provides a number of built-in Core Components ready for you to use in your app. You can find them all in the left sidebar (or menu above, if you are on a narrow screen). If you're not sure where to get started, take a look at the following cat reactnative.dev Components ? 재..

♩ 필요 프로그램 설치하기 1. 앱스토어에서 Expo 설치하기 2. Node.js LTS release 설치하기 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 3. Git 설치하기 https://git-scm.com/download/win Git - Downloading Package Download for Windows Click here to download the latest (2.38.1) 32-bit version of Git for Windows. This is the most recent maintained build. It was r..

React Native의 장단점 장점 크로스플랫폼 : 하나의 코드로 관리 ( ios, android, web) 비용절감 : 코드푸시로 빠른 업데이트 가능 변경된 코드 자동 적용 : Fast Refresh (불필요한 빌드과정이 없음) 오픈소스 플랫폼로 방대한 자료 단점 일부 기능은 Native 접근이 필요하다. Native에 대한 지식이 필요 라이브러리 의존도가 생김 브릿지를 사용하기 때문에 Native보다 성능이 떨어진다. 잦은 업데이트 Expo Cli vs React Native Cli Expo Cli 기본제공되는 API, 라이브러리 제공하여 초반 앱 개발을 단순화 Expo Go 어플만 있으면 기기 상관없이 프로젝트 실행 가능 추가 네이티브 모듈 사용이 불가 React Native Cli 네이티브 모듈..