본문 바로가기

React

(29)
React Native / FlatList Component FlatList 많은 양의 데이터를 받아서 출력시, React에서는 map 함수 / React Native 에서는 FlatList 사용 ScrollView 와 FlatList 의 차이 ScrollView : 데이터의 양이 적거나, 고정적일때 사용하기 좋음 스크롤 사용시 한번에 내리게 되면, 처리속도가 스크롤 속도를 따라가지 못해 흰색으로 화면이 로딩처리 되는 경우. (한번의 렌더를 처리하기 때문) FlatList : 데이터의 양이 많거나, 가변적인 경우, 예측할 수 없는 경우 사용하기에 적절함 ex. api를 통해 외부에서 크기를 알 수 없는 데이터를 가져오는 경우 데이터를 한번에 렌더링 하지 않고, 화면에 보여지거나 설정한 수만큼만 렌더링 함. App.js import { StatusBar } from..
React Native / Lists, ScrollView App.js import { StatusBar } from 'expo-status-bar'; import React, {useState} from 'react'; import { StyleSheet, Text, View, ScrollView } from 'react-native'; export default function App() { const [people, setPeople] = useState([ {name: 'shaun', key: '1'}, {name: 'yoshi', key: '2'}, {name: 'mario', key: '3'}, {name: 'luigi', key: '4'}, {name: 'peach', key: '5'}, {name: 'toad', key: '6'}, {name: '..
React Native / text input input 태그를 사용하고자 할때 TextInput 사용 가능 먼저, import 란에 TextInput 추가 import { StyleSheet, Text, View, TextInput } from 'react-native'; App.js import { StatusBar } from 'expo-status-bar'; import React, {useState} from 'react'; import { StyleSheet, Text, View, TextInput } from 'react-native'; export default function App() { const [name, setName] = useState('shaun'); const [age, setAge] = useState('30'); ..
React Native / Using Views, Text, Style, state React Native App.js 파일 구성 ① 해당 파일에서 사용할 컴포넌트 import 하는 부분 ② 실제 프로그램 작성. return안에 내용 작성. 태그 안에 해당내용을 작성 ③ view의 style은 해당부분에서 작성 후 적용 App.js import { StatusBar } from 'expo-status-bar'; import React, {useState} from 'react'; import { StyleSheet, Text, View, Button } from 'react-native'; export default function App() { const [name, setName] = useState('shaun'); const [person, setPerson] = useState..
React / React native 설치 및 실행 (Expo CLI) / 자바스크립트 프레임워크 & 모바일 개발 자바스크립트를 통해 하이브리드 모바일 앱 개발 가능해짐 / React Native 하나의 소스로 Android, iOS 동시에 개발할 수 있음 React 문법을 그대로 가져와서 개발 가능 1. 구글에 react native 검색 후, 사이트 접속 https://reactnative.dev/ 2. React Native 사이트 접속 Assuming that you have Node 12 LTS or greater installed, you can use npm to install the Expo CLI command line utility: - Node.js 가 설치되어 있다는 가정하에 진행되므로 없는 경우 설치 필요. 2-1. Node.js 설치 https://..