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

컴포넌트에 스타일을 적용하는 방법에는 아래와 같이 3가지 방법이 있다. 상황에 맞추어 사용하기 ♩ Inline style 컴포넌트마다 직접 입력한다 ♩ StyleSheet style StyleSheet를 생성하여 미리 정의해놓고 사용 . . . . . . const styles = StyleSheet.create({ container: { flex: 1, paddingTop: statusBarHeight, backgroundColor: "#fff", }, }); ♩ Styled Component 컴포넌트와 스타일을 한꺼번에 정의하여 사용 styled component를 사용하기 위해서는 라이브러리를 설치해야한다. yarn add styled-components 또는 npm install styled-co..

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..