개발새발 개발개발

React Navigation 1개의 화면으로 동작하는 App은 거의 찾아볼 수 없다. 상태와 동작에 따라 화면을 전환해주는 무언가가 필요한데 이런 화면간 이동을 도와주는 라이브러리가 React Navigation이다. Navigation은 stack 구조로 되어있어서 화면을 이동하면 전 화면이 사라지는 것이 아니라 기존의 화면 위에 새로운 화면이 쌓이는 구조로 되어있다. 설치 터미널을 킨 후 navigation을 사용하고 싶은 프로젝트에 들어간다. 패키지 설치 npm install @react-navigation/native npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-s..

1. Modal Modal 컴포넌트는 모든 View 위에 컨텐츠를 표시해주는 컴포넌트이다. —Example import React, { useState } from 'react'; import {View, Modal, StyleSheet, Text, TouchableHighlight } from 'react-native'; const App = () => { const [modalVisible, setModalVisible] =useState(false); return ( Hello World! { setModalVisible(!modalVisible) }} > Hide Modal { setModalVisible(true) }} > Show Modal ) } const styles = StyleSheet..

1. TouchableWithoutFeedback TouchableWithoutFeedback 컴포넌트는 자식 컴포넌트의 이벤트가 발생할 때 아무런 효과도 주지 않게 해주는 컴포넌트이다. 💡 해당 컴포넌트는 하나의 자식 컴포넌트만 적용이 되므로 여러 개의 컴포넌트에 적용하고 싶을 때는 View 컴포넌트 안에 컴포넌트들을 넣어줘야한다. —Example export default App; import React, { useState } from 'react'; import { View, StyleSheet, Text, TouchableWithoutFeedback } from 'react-native'; const App = () => { const [count, setCount] = useState(0); ..

FlatList 컴포넌트는 많은 양의 리스트 아이템을 보여주고 할 떄 쓰이는 React-Native 컴포넌트이다. Scroll View와 유사한 기능을 하나 동작 방식에 차이점이 있다. 는 데이터가 화면에 보이지 않을 때 사용자가 Swipe를 통해 안보이는 데이터를 볼 수 있도록 하기위한 컴포넌트이다. 다시 말해서 출력해야하는 데이터가 고정적이고 많지 않을 때 간단하게 사용할 수 있는 컴포넌트이다. 는 모든 데이터를 한번에 렌더링하는 것이 아니라 보여지는 부분이나 혹은 수동으로 설정한 양 만큼의 데이터만 렌더링이 되고 화면에 데이터가 보여지지 않는 곳은 기다렸다가 사용자가 swipe를 할 때 swipe한 화면의 크기만큼 자동으로 리렌더링이 되어 보여지는 컴포넌트이다. 다시 말해서 데이터의 길이가 가변적이..

1. ScrollView데이터의 양이 많아서 화면을 넘어가면 스크롤이 생기게 해주는 코어 컴포넌트이다. 스크롤을 빠르게 내리면, 데이터를 처리하는 속도가 스크롤 내리는 속도를 따라가지 못해서 흰색화면만 보일 수 있다. —Exampleimport React from 'react'; import {StyleSheet, Text, SafeAreaView, ScrollView} from 'react-native'; const App = () => { return ( Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad mini..

1. ButtonReact Native에서 버튼 컴포넌트를 만들어주는 키워드이다. —Exampleimport React from 'react'; import {View, StyleSheet, Button, SafeAreaView, Alert, Text} from 'react-native'; const Separator = () => ( ); const App = () => ( The title and onPress handler are required. It is recommended to set accessibilityLabel to help make your app usable by everyone. Alert.alert("Simple Button pressed")} /> Adjust the colo..

1. TextText는 텍스트를 표현하기 위한 컴포넌트이다. React-Native에서 기본적으로 제공하는 컴포넌트에서는 Text와 TextInput을 사용해야지 텍스트를 삽입 가능하기 때문에 필수적인 컴포넌트 중 하나이다. —Exampleimport React from 'react'; import {View, StyleSheet, Text} from 'react-native'; const App = () => { return ( I am bold and red ); }; const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center' }, baseText: { fontWeight: ..

1. Image —sourceimport React from 'react'; import {View, StyleSheet, Image} from 'react-native'; const App = () => { return ( ) } const styles = StyleSheet.create({ container: { flex : 1, backgroundColor: '#eee', justifyContent: 'center', alignItems: 'center' }, image1: { width: 200, height: 200, }, image2: { width: 50, height: 50, marginTop: 50 } }); export default App; require : 폴더에서 가져오는 경우 사..

10-1 개요padding과 margin은 레이아웃을 할 때 공백을 어느정도 줄껀지를 설정하는 함수이다.여백을 너무 많이주거나 적게 주게되면 App의 디자인에 문제가 생긴다.적절한 여백을 통해서 깔끔한 App 디자인을 만들어야 되는데 이 때 중요한 요소가 바로 padding과 margin이다. https://medium.com/frontendshortcut/margin-vs-padding-c1fc8ea8bfaf 10-2 Marginmargin은 부모컴포넌트나 같은 부모 컴포넌트 안에 있는 자식들과의 여백을 지정하는데 사용한다. —Exampleimport React from 'react'; import {Text, View, StyleSheet, SafeAreaView} from 'react-native'..

9-1 Layout DirectionLayout Directiondms 계층 구조에서 자식요소와 텍스트가 배치되어야 하는 방향을 지정한다.레이아웃의 방향은 양끝을 나타내는 start와 end를 통해 나타내는데 기본적으로 React Native는 LTR 레이아웃 방향으로 되어있다. LTR 모드에서는 start는 왼쪽 끝을 의미하고 end는 오른쪽 끝을 의미한다. LTR(default) : 텍스트와 자식 요소들이 왼쪽에서 오른쪽으로 배치된다. margin과 padding 속성도 왼쪽에 적용이 된다.RTL : 텍스트와 자식 요소들이 오른쪽에서 왼쪽으로 배치된다. margin과 padding 속성도 오른쪽에서 왼쪽으로 적용이 된다. 9-2 justifyContent자식 컴포넌트를 부모 컴포넌트 flexDirec..