Dev갱이 Dev갱이

React Native에서 안드로이드 폰, 아이폰 모두 동일한 UX로 현재 텍스트 필드 외 빈 공간을 탭할 경우 올라와 있는 키보드를 내리는 액션을 제공하기 위해서는 어떻게 해야할까? (1) 사용 될 컴포넌트 : TouchableWithoutFeedback, Keyboard https://reactnative.dev/docs/touchablewithoutfeedback TouchableWithoutFeedback · React Native If you're looking for a more extensive and future-proof way to handle touch-based input, check out the Pressable API. reactnative.dev https://reactnat..

(1) 공식문서 한번 훓어 본다. https://reactnative.dev/docs/alert Alert · React Native Launches an alert dialog with the specified title and message. reactnative.dev //이렇게 추가한다. import { View, StyleSheet, Button, Alert } from "react-native"; Alert.메소드 이런식으로 사용한다. 관련 메서드로는 alert() : static alert(title, message?, buttons?, options?) prompt() : static prompt(title, message?, callbackOrButtons?, type?, defaultV..

클릭시 데이터 삭제구현까지 했다, 이제 데이터 추가 하는거까지 해보자! //Components/Apptodo.jsx import React,{ useState } from 'react' import { View, StyleSheet, TextInput, Button } from 'react-native'; export default function AddTodo({SubmitHandler}) { const [text, setText] = useState(''); const ChangeHandler = (val) => { setText(val); } return ( SubmitHandler(text)} title='Add todo' color='coral'> ) } const styles = StyleSh..

(1) Contents 컴포넌트 만들기 //Components/Contents.jsx import React,{ useState } from 'react' import { View, StyleSheet, FlatList } from 'react-native'; import TodoItem from './TodoItem'; export default function Contents() { const [todos, setTodos ] = useState([ {todo: "Coding", key:'1' }, {todo: "Shopping", key:'2' }, {todo: "excyte", key:'3' }, {todo: "movie", key:'4' }, {todo: "wash", key:'5' }, {to..

(1) 헤더 컴포넌트를 만들어서 추가. //Header.jsx import React from 'react' import { View, Text, StyleSheet } from 'react-native'; export default function header() { return ( TodoApp ) } const styles = StyleSheet.create({ header: { backgroundColor: '#28324a', height:80, paddingTop:28, textAlign:'center', }, header__title:{ color:'#ffffff', textAlign:'center', fontSize:20, fontWeight:'bold' } }); import Header ..

(1) Touchable 공식문서 읽어보기. https://reactnative.dev/docs/touchableopacity TouchableOpacity · React Native If you're looking for a more extensive and future-proof way to handle touch-based input, check out the Pressable API. reactnative.dev Button컴포넌트보다 TouchableOpacity를 사용하는걸 지향하는듯. [TouchableOpacity] 버튼을 눌렸을 때에 피드백을 주는 버튼입니다. 단순히 텍스트 문자열을 렌더링하는 것이 목표인 경우에는 Button 요소를 선택하는 것이 좋습니다. 그러나 양식화된 버튼을 만들 ..

(1) FlatList 공식 문서 한번 읽어보기. https://reactnative.dev/docs/flatlist FlatList · React Native A performant interface for rendering basic, flat lists, supporting the most handy features: reactnative.dev FlatList는 많은 양의 스크롤이 필요한 리스트 아이템을 보여주고자 할 때 쓰이는 리액트네이티브 컴포넌트이다. JS에서의 map 함수 역할과 비슷하나 더 많은 기능을 내포하고 있어 react-native에서 많이 쓰이는 컴포넌트이다. ScrollView와 비교 RN에서 많은 양의 데이터를 출력 할 때 와 함께 주로 사용되는데 사용용도에 차이점이 조금 있..

https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB Using IndexedDB - Web APIs | MDN IndexedDB is a way for you to persistently store data inside a user's browser. Because it lets you create web applications with rich query abilities regardless of network availability, your applications can work both online and offline. developer.mozilla.org