devlog_zz

이전 예제에서 리스트를 많이 추가하였을 때 화면에 다 담지 못하는 오류 Flat List는 상단에 있는 콘텐츠에 의해 화면 밖으로 밀려난다. → 많은 내용을 담아야하는 리스트, 복잡한 리스트를 구현할 때는 FlexBox 를 사용해서 화면 전체를 차지하도록 해야함 const styles = StyleSheet.create({ container:{ flex:1, paddingTop:40, backgroundColor:'#ddd', }, }) Flex 레이아웃 구성의 가중치 엘리먼트가 한개면 1 은 100%, 두 개면 1은 50% 의미 flex:1을 주면 화면 전체를 차지함

The Net Ninjs Todo App todoList 를 보여주기 클릭하면 삭제되기 입력한 내용 추가되기 많이 추가 했을 때, 스크롤이 끝까지 안되는 현상 App.js todos를 추가하고 삭제하는 함수는 app.js 에서 생성 후 다른 컴포넌트로 넘겨준다. import { StatusBar } from 'expo-status-bar'; import React, {useState} from 'react'; import { StyleSheet, Text, View, ScrollView, FlatList, TouchableOpacity} from 'react-native'; import AddTodo from './components/addTodo'; import Header from './compone..

const changeHandler = (val) => { setText(val); } onChangeText ={(val)=>changeHandler(val)}/> onChangeText={changeHandler} 같은 효과 그냥 함수명만 써도 됨 자동으로 입력한 value를 changeHandler 인자로 넣음

전달받는 방법 2가지 props / {item} export default function TodoItem (props) { props.item } export default function TodoItem ({item}) { item }​ 전달하는

TouchableOpacity FlatList 안에 item들 클릭 이벤트 걸고 싶을 때 -pressable하게 만들기 ( button으로 감싸면 안됨 : style 줄 수 없음 ) pressHandler // 클릭하면 리스트에서 삭제하기 const pressHandler = (id) => { console.log(id) setPeople((prevPeople)=>{ return prevPeople.filter(person => person.id != id) }) } return ( item.id} data={people} renderItem={({ item })=>( pressHandler(item.id)}> {item.name} )} /> )

React Native FlatList 자동으로 스크롤 생김 scroll view 와 동일하게 동작 성능은 FlatList가 더 좋음 코드도 더 짧음 ( {item.name} )} /> scrollView와 비교 {people.map((item)=>{ return ( {item.name} ) })} keyExtractor flatList data 가 key 가 이와 같이 정의되어 있다면 그냥 사용해도 무관 const [people, setPeople] = useState([ {name:'aaa',key:'1'}, {name:'bbb',key:'2'}, {name:'ccc',key:'3'}, {name:'ddd',key:'4'}, {name:'eee',key:'5'}, {name:'fff',key:'6'}..

ReactNative ScrollView export default function App() { const [people, setPeople] = useState([ {name:'aaa',key:'1'}, {name:'bbb',key:'2'}, {name:'ccc',key:'3'}, {name:'ddd',key:'4'}, {name:'eee',key:'5'}, {name:'fff',key:'6'}, {name:'ggg',key:'7'}, ]) return ( {people.map((item)=>{ return ( {item.name} ) })} ); } 코드 리팩토링 후 map 인자 하나니까 () 없애고, {return } 제거 return ( {people.map(item=> ( {item.name}..

useState export default function App() { const [name, setName] =useState('aaaa') const [person, setPerson] = useState({name:'mario', age:40}) const clickHandler = () => { setName('bbbb') setPerson({name:'alice',age:30}) } return ( My name is {name} His name is {person.name}, his age is {person.age} ); } button 클릭하면 setName이 실행됨 ( useState ) name이 바뀌면서 화면이 리렌더링 됨 ..} onPress 사용 여러줄 입력 받을 때 : mult..