KEEP CODING

state와 useState에 대해서는 이전 글에서 이미 다룬 적이 있다. https://joylee-developer.tistory.com/144 React Native - State React에서의 Props, State, useState, 이벤트 등을 그대로 사용한다. 클래스형 컴포넌트에서 어떻게 사용해야하고, 동작하는지는 React강의를 들으며 정리한 자료에 나와있다. State https://joylee-developer.tis.. joylee-developer.tistory.com 그런데 분명히 지정한 함수를 통해 state를 변경시켰음에도 변화가 바로 반영되지 않는 경우가 있다. 1 2 3 4 5 6 7 8 import React, { useState } from 'react'; const ..

위와 같이 진행률을 나타내는 막대를 진행바라고 한다. 보통은 HTML과 JS를 가지고 만들었는데, react-native에서 쉽게 사용할 수 있는 라이브러리가 있어서 사용해봤다. https://github.com/oblador/react-native-progress GitHub - oblador/react-native-progress: Progress indicators and spinners for React Native Progress indicators and spinners for React Native. Contribute to oblador/react-native-progress development by creating an account on GitHub. github.com 1. 라이브러..

expo에서는 쉬운 폰트 적용 방법을 제공하고 있다. 1. expo-font 모듈 다운로드 터미널에 명령어를 입력한다. npm install expo-font 2. expo-font 모듈을 import 한다 import * as Font from 'expo-font'; 3. custom font파일을 저장한다. assets/fonts 경로를 만들어 파일을 저장해둔다 4. font 가져오기 const getFonts = async () => { await Font.loadAsync({ Cafe24Dangdanghae: require("../assets/fonts/Cafe24Dangdanghae.ttf"), }); }; 내가 사용한 폰트 이름은 Cafe24Dangdanghae였다. Font.loadAsync..

TextInput을 통해 여러 값을 연속으로 입력받고 싶을 때 어떻게 해야될 지 몰라서 인터넷을 찾아보았다. blurOnSubmit TextInput 컴포넌트는 기본적으로 submit을 하고나면 blur처리된다. focus를 잃고 자판이 자동적으로 사라지는데, 그것을 막기 위해서는 blurOnSubmit 속성을 변경해주면 된다. 기본값은 true이며, blurOnSubmit={false}로 바꿔주면 된다. blurOnSubmit과 useRef를 같이 사용하면 다음 input으로 쉽게 넘어갈 수 있다. useRef javascript에서 특정 요소를 selector를 통해 선택했던 것 처럼, react에서도 특정 component를 가리킬 수 있다. useRef를 사용하면 가능하다. useRef 사용시 주..

로딩화면과 아이콘 설정은 app.json 파일에 있다. 아이콘은 asset/icon.png, splash이미지는 asset/splash.png로 설정되어 있다. 두 png파일과 동일한 크기의 png파일을 만들어 설정하면 된다. png파일의 이름을 icon.png, splash.png로 바꾸거나 json파일을 수정하면 된다. android의 경우는 asset/adaptive-icon.png으로 따로 설정되어 있으므로 빠뜨리지 않도록 신경써서 설정하자. *splash 화면 옆에 공백이 보이는 경우, "resizeMode": "cover"로 바꾸거나, "backgroundColor": 이미지배경색 으로 바꿔주면 된다.

AsyncStorage, AppLoading을 이용해 로컬에 자료를 저장/불러오고, 앱 로딩하면서 저장된 자료를 불러오도록 만들어본다. AsyncStorage AsyncStorage는 자료를 로컬에 저장하고 불러올 수 있도록 도와주는 API이다. https://docs.expo.dev/versions/latest/sdk/async-storage/ AsyncStorage - Expo Documentation Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React. docs.expo.dev 사용하기 위해 터미널에서 다운받아준다. expo instal..

Todo app을 만드는데 자료를 삭제하는 방법을 새롭게 알게되어 정리해봤다. 1. Array에 자료를 관리하는 방법 기존에 목록을 추가/삭제하는 방법은 아래와 같았다. 주로 Array형태로 자료를 저장/삭제했다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 // Array 형태의 자료관리 // selectedKeywords = ['A', 'B', 'C'] // 체크박스에 체크한 항목 추가/해제한 항목 삭제 function handleClick(e) { const value = e.target.value; const checked = e.target.checked; if(checked) { // 키워드를 추가한 경우 props.onChange([...selectedKeywords, valu..

할일 목록이 많아져서 화면을 채웠을 때, 스크롤이 가능해야 모든 자료를 확인할 수 있다. 지금까지 잘 사용했던 View 컴포넌트는 내부 요소가 많아져도 스크롤 할 수 없다. ScrollView ScrollView는 요소가 많아지면 스크롤 할 수 있는 기능을 제공한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 import styled from "styled-components/native"; import Task from "./components/Task"; const List = styled.ScrollView` // flex와 width를 설정해 줘야 한다. flex: 1; width: ${({ width }) => width..

모바일 기기는 화면 크기가 천차만별이다. 그렇기 때문에 어떤 요소의 크기를 수치로 정해두면 기기별로 크기가 달라보일 수 있다. 이러한 문제점을 해결하기 위해 react-native에서는 Dimensions라는 API를 기본적으로 제공해준다. 1 2 3 4 5 import { Dimensions } from 'react-native'; // 화면 너비, 높이 구하는 방법 const windowWidth = Dimensions.get('window').width; const windowHeight = Dimensions.get('window').height; cs Dimensions를 통해 현재 기기의 화면 크기를 알 수 있다. Input 양 쪽에 20px의 마진을 두고싶다면 아래와 같이 설정하면 된다. $..

Expo로 앱을 만들 때 App.js에는 expo에서 제공하는 StatusBar를 사용해 기본 탬플릿을 만들어준다. 1 2 3 4 5 6 7 8 import { StatusBar } from 'expo-status-bar'; // ...생략 return ( ) Colored by Color Scripter cs 그런데 아래 내용을 만들다보면 Title이 상태바에 가려진 모습을 볼 수 있다. 이런 상황을 해결하기 위해 두 가지 방법을 사용할 수 있다. 1. 상위 컴포넌트의 스타일을 설정한다. 1 2 3 Colored by Color Scripter cs 상위에 View가 있다면, View의 style에 paddingTop을 설정하는 방법이다. OS가 Android일 때만 paddingTop을 설정하는데, ..