컴퓨터야, 10진법 해봐

import { StyleSheet, View, Text, FlatList, Alert, TouchableWithoutFeedback, Keyboard, } from 'react-native'; return ( { Keyboard.dismiss(); }}> ( )} /> ); };

import {StyleSheet, View, Text, FlatList, Alert} from 'react-native'; const submitHandler = text => { if (text.length > 3) { setTodos(prevTodos => { return [{text: text, key: uuid().toString()}, ...prevTodos]; }); } else { Alert.alert('OOPS!', 'Todos must be over 3chars long...', [ {text: 'Understood', onPress: () => console.log('alert closed')}, {text: 'So What!', onPress: () => console.log('al..

큰 그림을 설명하고 시작 할까요? 음... TextInput도 결국 스테이트를 통해 관리하고 사용합니다. useState와 잘 묶어야하고. 리액트는 기존의 스테이트를 복사하고 사용하기때문에 SpreadOperator를 잘알아야합니다. SpreadOperator는 객체나 배열의 내용을 펼쳐주고 복사를 할 곳에 중복되는 프로퍼티가 있다면 융통성 있게도 그 프로퍼티 만큼은 복사하지 않습니다. 궁극적으로 '없는 프로퍼티만 추가, 복사를 하는 문법이다.' 라고 생각하시면 됩니다. 그리고 새로운 요소에 안전하게 키를 부여하는 방법까지 알아보시죠. 추가 기능에서 정말 새로 알야할게 산더미 처럼 많습니다. 하나하나 정리하시면서 천천히 깊게 보셔요. AddTodo 컴포넌트를 만들어 주세여. 우선은 TextInput를 A..

헤더에 이어서 리스트를 만들어 볼게요.저번에 FlatList를 활용해 볼건데요.FlatList 안에 저희들이 만든 컴포넌트를 renderItem Prop에 사용하는 방식입니다.(///FlatList의 프로퍼티로 renderItem 있는거 아시죠??///) 저희는 각 항목에 대한 스타일과 기능을 다른 한쪽의 컴포넌트로 분리해서 구현할겁니다../src/components/TodoItem.js를 만들어 주세요. 이 컴포넌트가 FlatList에서 반복적으로 사용됩니다. ***Props로 Item을 넘겨받네요.*** 그리고 나중에 TouchableOpacity 에 onPress에 함수를 등록하도록 하겠습니다. 지금은 그냥 넘어갈게요. 스타일시트는 따로 설명은 필요 없을거 같네요. marginHorizontal은 ..

todo앱을 통해서 그 동안 보았던 네이티브 앱의 기술들을 요밀조밀 잘 합쳐보도록하겠습니다. 1. 제목을 표시할 헤더를 위에 두고 2. InputText를 헤더 바로 밑에 위치시키고 3. 터치가 가능한, 할 일 목록들을 표시하겠습니다. App에 기본 설정을 해보겠습니다. 어떤 이유에서인지 SafeAreaView로 FlatList를 감싸면 오류가 발생합니다. SafeAreaView 대신에 그냥 핸드폰의 노치만큼의 margin을 주는 것이 더 좋을 것 같다고 판단됩니다. 보통의 스마트폰들은 위에서 아래로 스크롤하기 편합니다.그래서 우리는 블럭 형태로 쌓아서 올리는 레이아웃을 가져갈겁니다.Native의 기본 flex-direction 방향은 column입니다.그래서 따로 명시하지 않는 이상 기본적으로 요소들을..

TouchableOpacity는 일반적인 요소들 (텍스트, 이미지 etc..)들을 터치가능하게 해줍니다.Opacity는 불투명함이라는 뜻인데요. 터치가능한 불투명함 이라고 해석하기는 좀 이상하죠??Opacity라는 이름이 붙은 이유는 버튼을 클릭해서 활성화되었을 때 순간적으로 그 불투명도가 올라갔다가 내려와서 사용자에게 클릭했다는 피드백을 시각적으로 줄 수 있기때문에 Opacity라는 이름이 추가된 것입니다. 네, 그럼 넘어가서... onPress에 함수를 등록해주었습니다.많이들하시는 실수가onPress={onPressHandler(item.id)}이런식으로 함수를 넣어준다는 것인데,이것은 함수를 등록한 것이 아니라 함수의 반환값을 넣어준 것이죠... 올바르게 동작하기 위해서는onPress={( ) =>..

FlatList는 map함수를 대신할 좋은 방법입니다. 많은 분들이 map을 사용하기보다는 FlatList컴포넌트를 활용합니다. ***map을 사용하게되면 ScrollView로 감싸줘야하지만 FlatList를 사용하면 ScrollView를 사용하지 않아도 됩니다.*** ***FlatList를 사용하면 자동적으로 렌더링 최적화가 됩니다. 데이터가 너무 많을 때에는 한꺼번에 불러오는 것이 아닌 성능에 문제없을 만큼의 데이터를 조금씩 가져옵니다. *** {item.name}} /> FlatList 컴포넌트는 data Prop으로 데이터를 받아오고 renderItem으로 출력 형식을 지정해줍니다. { ( { item } )=> {...} } 이 부분이 좀 복잡해보이는데 가장 밖에있는 { }는 jsx의 것이고, ..

useState에는 string, array, object... 전부 그 STATE가 될 수 있습니다.배열은 리스트죠. 화면에 요소들을 리스트로 나열해보는 것을 배워봅시다. 여기서 아셔야 할 것은 2가지 정도라고 생각이 됩니다.1. map함수2. 각 View요소에 키를 필수적으로 넣어줘야 한다는 것. map함수는 그 용도가 정말 다양합니다.people.map(item => { return ( {item.name} ); }) 여기서 item은 배열의 각 요소를 나타냅니다.알아서 끝까지 순회하니 for문이나 while문처럼 어떤 증가값이나, 종료시점을 알려주는 구문을 넣어주지 않아도 됩니다.너무 간단했습니다. map함수와 같이 그 인자로 함수(콜백)을 받는 함수들에 유의하셔야 합니다. 보통 대부분 그런 콜백..

컴포넌트 마다 그에 대한 이벤트들이 있습니다. 버튼은 onPress죠. textInput(사용자 입력)은 onChangeText 이벤트입니다. onChangeText 이벤트에 익명함수를 등록해 주었는데요. 저기있는 val 인자는 어디서 왔을까요? onChangeText이벤트가 자동적으로 넘겨준 인자입니다. 인풋의 내용이 저 인자에 들어있습니다. onChangeText 이벤트의 약속된 동작 방식입니다. (꼭 저기 있는 인자의 이름이 val이 되어야하는 것은 아닙니다. 인자의 이름은 마음대로 정하시는 겁니다.) 적는대로 변경사항이 state에 잘 적용되네요. TextInput에 Props로 multiline이나 keyboardType='numeric'을 적용해보세요. 여러줄 입력이나, 숫자패드만 나오는 입력..

이 코드로 시작하겠습니다. react-native cli와 초기 환경설정 세팅을 하시고 react-native init MyApp하면 코딩환경이 세팅 됩니다. (자세한 것은 구글링...) 음... useState의 기본 사용법은 이겁니다. 예를들어 이름을 저장할 state를 마련한다고 생각해보겠습니다. const [name,setName] = useState(''); const [사용할 변수명] = [] 이런 형태의 문법은 해체할당이라 합니다. 객체와 배열은 해체할당이 가능합니다. 그리고 React에서 자주 사용하니 꼭 익혀두셔야할 문법입니다. name = 정보가 저장되는 변수입니다. setName = 함수인데, name만을 조작하는 함수입니다. 이 함수를 통해서만 name을 조작할 수 있습니다. use..