본문 바로가기

내마음대로만들어보자/Expo22

컴포넌트 앱 개발에 필요한 필수 기초지식 중 하나로 컴포넌트에 대해 알아보자. 페이스북 앱을 보면 쉽게 내용이 이해가 간다. 버튼, 화면 , 내용 등등 무수히 많은 컴포넌트로 구성이 되어 있다. 즉, 컴포넌트(Component)는 정해진 엘리먼트들로 만들어진 화면의 일부분 모두를 가르킨다. 그림을 간단히 이해해보자면, 무수히 많은 컴포넌트들에서 데이터를 전달받고 그 데이터를 관리한다고 보면된다. 컴포넌트에서 데이터를 관리하고 유지하는 방법은 State 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 방식은 Props 이며, 하위 컴포넌트에서 상위 컴포넌트로 데이터를 전달할 순 없다. 그리고 useEffect 라고 화면에 컴포넌트가 그려지면 처음 실행해야하는 함수들을 모아둔 곳으로 알아두고 넘어가자! 1. 컴포.. 2021. 9. 6.
flexDiretion / justifyContent / alignItems flexDiretion은 자리 잡은 영역의 방향이다. 예제를 보면 바로 이해가 간다. * 예제 import { StatusBar } from "expo-status-bar"; import React from "react"; import { ScrollView, StyleSheet, Text, View, Button, Alert, TouchableOpacity, } from "react-native"; export default function App() { return ( ); } const styles = StyleSheet.create({ container: { flex: 1, }, containerOne: { flex: 1, backgroundColor: "red", }, containerTwo: .. 2021. 8. 29.
[앱 화면 만들기] 콘텐츠 위치 - Flex 앱 화면을 구성할 때 영역의 레이아웃을 결정할 수 있는 flex에 대해 알아보자. flex는 상대적이다. 가상 최상위의 container 스타일을 가져가는 View 엘리먼트는 디바이스 전체 화면의 영역을 가져가며, 안 쪽의 containerOne 스타일이 부여된 View 엘리먼트는 전체를 3등분 한 뒤 1/3을 가져가고 containerTwo는 2/3를 가져간다. 같은 레벨의 엘리먼트들의 flex 합을 각자의 flex 속성값 대로 가져간다. import { StatusBar } from "expo-status-bar"; import React from "react"; import { ScrollView, StyleSheet, Text, View, Button, Alert, TouchableOpacity,.. 2021. 8. 22.
[앱 화면 만들기] - 구성한 화면 꾸미기, Styles 태그 스타일을 주는 방식 또한 리액트 네이티브에서 제공하는 stylSheet 기능을 가져와 적용한다. styleSheet는 결국 객체(딕셔너리)를 하나 만드는데, 이 객체에 사용법 대로 생성한 다음 잘 정리해두면 JSX엘리먼트에서 가져다가 사용만 하면된다. 사용할 땐 모든 태그에 공통적으로 있는 style속성에 아래서 만든 객체 키 값을 부여하여 적용한다. 이렇게 연결해주면은 스타일을 적용시킬 수 있다. * 자주 사용하는 스타일 속성 import { StatusBar } from "expo-status-bar"; import React from "react"; import { ScrollView, StyleSheet, Text, View, Button, Alert, TouchableOpacity, } f.. 2021. 8. 22.

티스토리툴바