react native

FlatList 는 시간이 지남에 따라 항목 수가 변경될 수 있는 긴 데이터 목록에 적합하다. ScrollView와는 달리 현재 화면에 표시된 요소만 렌더링 하며 모든 요소를 한 번에 렌더링 하는 것은 아니다. FlatList를 사용하기 위해서는 data와 renderItem이 필요하다. data는 rendering 할 요소들이며, data를 불러와 renderItem에 하나씩 전달한다. renderItem은 전달받은 data를 하나씩 render 한다. 다음은 FlatList를 구현한 코드이다. import React from 'react'; import { FlatList, StyleSheet, Text, View } from 'react-native'; const styles = StyleSheet..

ScrollView import React from 'react'; import { Image, ScrollView, Text } from 'react-native'; const logo = { uri: 'https://reactnative.dev/img/tiny_logo.png', width: 64, height: 64 }; export default App = () => ( Scroll me plz If you like Scrolling down What's the best Framework around? React Native ); Component들을 위에서 아래로 쭉 나열하면 화면을 넘어가는 경우가 있다. ScrollView를 이용하면 Component들을 내려가며 볼 수 있다. 태그안에 Com..

Handling Text Input import React, { useState } from 'react'; import { Text, TextInput, View } from 'react-native'; const PizzaTranslator = () => { const [text, setText] = useState(''); return ( setText(text)} defaultValue={text} /> {text.split(' ').map((word) => word && '🍕').join(' ')} ); } export default PizzaTranslator; react native 공식문서에 있는 textinput을 다루는 코드이다. 공백으로 구분하여 한 단어당 피자를 출력해 준다. 태그에..

React Native프로젝트를 생성하고 Terminal을 새로 만든다 (VScode를 사용하고 있다.) AVD를 실행시키고 Terminal에 react-native run-android를 입력하면, index.js를 최초로 접근하여 코드를 읽는다. import {AppRegistry} from 'react-native'; import App from './App'; import {name as appName} from './app.json'; AppRegistry.registerComponent(appName, () => App); 위에는 index.js이다. 같은 폴더에 있는 APP.js를 import 해서 APP이라 하고 AppRegistry.registerComponent(appName, () =..

Tic Tac Toe React Native tutorial에 안내되어 있는 tic tac toe 게임을 구현하며 React Native의 기본적인 사용법을 알아볼 것이다. function Square(props) { return ( {props.value} ); } class Board extends React.Component { renderSquare(i) { return ( this.props.onClick(i)} /> ); } render() { return ( {this.renderSquare(0)} {this.renderSquare(1)} {this.renderSquare(2)} {this.renderSquare(3)} {this.renderSquare(4)} {this.renderSquar..

React Native란? React는 유저 인터페이스 구현을 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리이다. React는 하나의 코드로 ios, android 환경에서 모두 구현이 가능하다는 장점을 갖고 있다. React Native rendering 원리 React는 VirtualDOM이라는 가상 DOM을 이용하여 화면을 수정하면 모든 화면 출력 flow를 실행하는 React와는 달리 실제 변화는 가상의 DOM에 적용시키고 최종적인 결과만 DOM에 적용시킨다. 가상의 DOM에서는 필요한 곳만 계산하고 필요한 최사한의 변경사항만 랜더링 하기에 매우 효율적이다. React Native workflow 리액트 네이티브 소스 -> Page render -> 리액트 컴포넌트 DOM에 마운..

React Native 시작하기 React Native를 시작하기 위해서는 node.js, Android studio 등 여러 가지 프로그램들을 설치하고 환경변수 및 여러 설정을 해야 한다. 이 과정은 다음 블로그를 참고하여 진행하였다. https://dev-imaec.tistory.com/8 [React-Native] React Native Android 무작정 시작하기(설치) React-Native 무작정 시작하기 요즘 react native를 공부하고 있습니다. 하나의 개발 플랫폼으로 안드로이드와 iOS 둘 다 대응할 수 있다는 점에서 굉장히 매력적입니다. react native에 대한 설명과 장단점 dev-imaec.tistory.com 프로젝트 생성하기 Git-bash를 이용하여 프로젝트를 생성..