🌼 리액트 공부18 [리액트네이티브] FlatList VS ScrollView 너넨 모양 전체코드는 좀 복잡시럽게 길지만, 아무튼 FlatList에 대해 정리하면 우리가 ScrollView를 안쓰고, FlatList를 사용해야 하는 이유?? ScrollView는 모든 자식 컴포넌트를 렌더링하는데 FlatList는 화면에 보여지는 것만 신경쓴다. (= 레이지로딩 : 레이지로딩은 페이지를 읽어들이는 시점에 중요하지 않은 리소스를 나중에 로딩하는 기술이다. 따라서 중요하지 않은 리소스들은 필요할 때 로드가 되어야 한다. ) * FlatList는 자체에 map이 내장되어 있지만, map 돌릴때 Key 넣어줬던 것 대신 KeyExtractor를 지정해줘야 한다. * scrollview와 다르게 onRefresh만 넣어줘도 알아서 비활성화됏다고, onRefresh되면 활성화된다. * data : 어떤 .. 2023. 1. 4. [리액트네이티브] react-navigation 리액트에선 리액트-라우터-돔을 사용했었는데, 리엑트 네이티브에선 리액트-네비게이션을 쓴다고 한당 (아래는 리액트 네이티브 공식문서) https://reactnavigation.org/docs/native-stack-navigator/ https://reactnavigation.org/docs/native-stack-navigator/ reactnavigation.org 네비게이션을 그냥 쓸 순 없고, 네비게이션을 감싸주는 네비게이션 컨테이너가 있는데, 요 컨테이너로 감싸주기 https://reactnavigation.org/docs/navigation-container/ https://reactnavigation.org/docs/navigation-container/ reactnavigation.org .. 2023. 1. 3. [리액트네이티브] 앱 아이콘 만들기 npx create-expo-app 프로젝트명 프로젝트를 생성하면, 기본적으로 assets 폴더에 icon, splash, adaptive-icon이 세팅이 되어있다 splash : 앱이 로딩되는 동안 보여지는 이미지 adaptive-icon : 안드로이드 폰을 위함 icon : ios(애플)을 위함 요 기본세팅된 앱 아이콘을 내가 원하는 이미지로 바꾸고 싶을땐 요렇게 expo-icon-app이 제공해주는 피그마에서 간단하게 이미지를 변경해주고 등록을 해주기 https://www.figma.com/file/GIA3zMtupRyz1w8lmsfd9a/Expo-App-Icon-%26-Splash-(Community)?node-id=0%3A1&t=NPMwzvevwbuFA72Q-0 Figma Created wit.. 2023. 1. 3. [AsyncStorage] 리액트 네이티브로 앱을 만들때 , localStorage같은 역할을 할 수 있는 애가 있을까?! 리액트 네이티브를 배우면서, AsyncStorage를 사용하는 법을 배우게 되었는데 튜터님이 이 AsyncStorage는 localStorage같은 역할을 해주는 아이라고 하셨었다. 생각해보니 이건 웹이 아니니, 핸드폰에 localStorage가 없지 않은강?! 따라서 웹 프로젝트를 만들때, state나 서버에 저장하지 않고 임시로 새로고침이 되어도 데이터를 가지고 있을 수 있는 데이터저장소가 필요한 것 앱이 꺼지더라도 데이터를 가지고 있을 수 있는 아이가 필요한 거시당 ** 예전에는 AsyncStorage가 리액트 네이티브 프로젝트에 자체 내장되어 있어서 별도로 설치할 필요가 없었지만, 해당 기능을 커뮤니티에서 유지보수하면서 라이브러리로 분리되었다고 한다. 따라서 사용하려면 따로 설치를 해주어야 함!!.. 2022. 12. 31. [리액트 네이티브] 리액트 네이티브로 TodoList CRUD 기능 구현해보기 >> 리액트 네이티브로 투두리스트 CRUD 기능 구현하기 ADD 기능 *add 할때는 todos에 단순히 newTodo를 추가해주는거고 const addTodo = () => { const newTodo = { id: Date.now(), text, isDone: false, isEdit: false, cate, }; // 배열로 [] 감싸주는거 잊지말긔!!!!!!!!!!! setTodos([...todos, newTodo]); }; UPDATE 기능 update는 새롭게 얕은 복사를 해서, 파라메터로 받아왔던 id의 인덱스를 찾고(findIndex)⇒ 이놈 자체를 index라고 객체하나 만들어준다음에 todos[index만들어준객체] 의 값을, 새로운 editText로 바꾼다고 todos[index만들.. 2022. 12. 30. [리액트] TodoList UI만 따라하기!!! import { StatusBar } from "expo-status-bar"; import { StyleSheet, Text, View, Button, TextInput, SafeAreaView, ScrollView, } from "react-native"; import styled from "styled-components"; import { AntDesign } from "@expo/vector-icons"; import { FontAwesome } from "@expo/vector-icons"; export default function App() { return ( JavaScript React Coding Test 신나는 실행컨텍스트 공부 너무 좋은 ES6 최신문법 공부 ); } const T.. 2022. 12. 29. 이전 1 2 3 다음
