개발 일기

해당 링크 참조 Flex Flex을 통해서 비율을 통해서 결정을 할수가 있습니다. 따라서 아래에 코드를 보면 flex을 통해서 비율을 정할수가 있습니다. import React, { Component } from 'react'; import { View } from 'react-native'; export default function FlexDimensionsBasics() { return ( // Try removing the `flex: 1` on the parent View. // The parent will not have dimensions, so the children can't expand. // What if you add `height: 300` instead of `flex: 1`? ..

화면 위에서 컴포넌트에 가로 세로 사이즈를 결정하는 방법에 대해서 설명하도록 하겠습니다. 제일 먼저 고정적으로 'width' or 'height'을 설정을 하는 방법이 있습니다. import React, { Component } from 'react'; import { View } from 'react-native'; export default function FixedDimensionsBasics() { return ( ); } Flex Dimensions 컴포넌트에 flex를 사용을 해서 동적으로 확장 및 비율에 따라서 정할수가 있습니다. import React, { Component } from 'react'; import { View } from 'react-native'; export defau..

ReactNative에서는 Style을 Javascript을 사용해서 줄수가 있습니다. 따라서 모든 컴포넌트에서는 style이라는 prop을 통해서 적용시킬수가 있습니다. 보통적으로 CSS와 비슷합니다. 하지만 예시로 css에서는 background-color를 했다면 react native에서는 backgroundColor 이런식으로 사용을합니다. [예시] import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; const styles = StyleSheet.create({ container: { marginTop: 50, backgroundColor :'#efefef' }, bigBlue: { color: 'bl..

FlatList 일반적으로 ListView을 표현을 했을때에는 FlatList or SectionList 을 사용합니다. 먼저 FlatList같은 경우에는 가변적인 대량의 아이템을 표시하는데 효과적입니다. 일반적으로 전부 렌더링 하는 방식이 아니라 보여지는 부분만 렌더링 하기 때문입니다. FlatList는 중요한 props가 몇가지가 있는데 그중 몇개만 설명해 드리도록 하겠습니다. data FlatList에 List에 대한 아이템 정보입니다. renderItem 실제로 렌더링을 진행을 할때 보여줄 컴포넌트입니다. [예제] import React from 'react'; import { FlatList, StyleSheet, Text, View } from 'react-native'; export defa..

ScrollView ScrollView는 안에 다양한 컴포넌트를 포함시켜도 스크롤이 가능하게끔 설계가 되어있습니다. 또한 가로 세로도 모두 포함을 합니다. 아래 예시에서는 vertical(세로) 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 b..

TextInput TextInput은 사용자로부터 입력을 받을수가 있습니다. onChangeText props을 통해서 입력값을 계속해서 받을수가 있습니다. import React, { Component, useState } from 'react'; import { Text, TextInput, View } from 'react-native'; export default function PizzaTranslator() { const [text, setText] = useState(''); return ( setText(text)} defaultValue={text} /> {text.split(' ').map((word) => word && '🍕').join(' ')} ); } 따라서 위와 같은 코드에서는..

React Native는 React 위에서 돌아갑니다. React React는 Javascript으로 이루어져있고 사용자 인터페이스를 제공하는 오픈 소스 라이브러리입니다. React는 다음과 같은 concepts을 이해해야합니다. components JSX props state Component 이제 React Native에 첫번째 예시를 보여드리겠습니다. React에서는 Function Component or Class Component로 구성을 할수가 있습니다. //function import React from 'react'; import { Text } from 'react-native'; export default function Cat() { return ( Hello, I am your ca..

React Native ? React Native는 Android IOS을 React 와 App Native 기능을 사용해서 개발을 할수 있는 open framework 입니다. React Native는 Javascript로 접근이 가능하고 UI는 React Component을 사용합니다. Views and mobile development 안드로이드 및 IOS 개발에 있어서 view는 화면에서 text , image 또는 사용자에게 이벤트를 받을수 있는 UI의 기본 구성 요소입니다. Native Components Android 개발자에게는 Java , Kotlin , IOS 개발자에게는 Swift , Objective-c 사용하지만 React Native는 Javascript을 사용하여 React C..