React

React Native Navigation application은 여러 개의 화면을 가지며, 화면 이동과 상호작용으로 동작한다. 그렇다면 react native에서는 어떤 식으로 화면 이동을 하는가?? 정답은 navigation을 이용하는 것이다. Navigation이란? 화면이동을 관리하는 것이라 생각하면 된다. 필요한 화면들을 정의하고 액션이나 이벤트에 반응하여 원하는 화면을 출력해주는 기능을 한다. 그중, stack navigation 은 화면을 stack과 비슷하게 관리하는 것이다. stack은 LIFO의 자료구조이다. 즉 마지막에 들어온 것이 가장 먼저 나가는 원리이다. 화면들을 한층 한층 쌓아 올리고 위 층부터 빠져나간다고 생각하면 된다. React Native Stack Navigation ..

Props란? props는 변하지 않는 데이터이다. props의 데이터 흐름은 상위 Component에서 하위 Component로 이동한다고 볼 수 있다. 아래 코드를 예시로 보자. import React, { Component } from 'react'; import {View, Text} from 'react-native'; class PropsText extends Component { constructor(props){ super(props); } render(){ return({this.props.text}); } } const App = () => { return ( ); }; export default App; PropsText라는 임의의 class를 만들었다. 전달받은 props를 에 적용..

Library react native에 원하는 기능을 지원하는 Component나 기능들이 없는 경우도 있다. 하지만, 개발자들이 이미 구현해 놓은 Component나 기능들이 있다. 따라서 우리는 프로젝트에 원하는 library(package라고도 함)를 설치하여 사용하면 된다. 설치를 원하는 프로젝트에 Terminal를 키거나 Terminal를 해당 프로젝트 디렉터리로 이동한다. npm install library이름 이 코드를 이용하여 library를 설치할 수 있다. (node.js가 깔려 있다면 문제없이 작동할 것이다.) npx react-native run-android 라이브러리를 알아보다 보면 npm과 npx를 모두 볼 수 있을 것이다. 처음에는 npx는 ios에서 사용하거나 오타인 줄 알..

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을 다루는 코드이다. 공백으로 구분하여 한 단어당 피자를 출력해 준다. 태그에..

화면에 Component들을 원하는 위치에 정렬하기 위해 설정하는 값들이 있다. 우선 layout은 기본적으로 좌우로 Component들을 위치시킬 것인지, 상하로 위치시킬 것인지 정할 수 있다. 또한, Component들이 해당하는 layout에서 얼마정도의 크기를 점유할지 정하는 flex를 알아야 한다. Flex & FlexDirection flex는 부모 Component안에서 자식 Component 끼리 어느정도의 위치를 점유할 것인지를 나타낸다. import React from 'react'; import {View} from 'react-native'; const FlexDirectionBasics = () => { return ( ); }; export default FlexDirection..

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에 마운..