[스파르타코딩클럽] 웹개발자가 듣는 앱개발 초보 강의_리엑트네이티브 기본

- 컴포넌트 :Component : 정해진 요소를 사용하여 만든 화면의 일부분 !!!재사용성

ex) View, Image, TouchableOpacity

- 속성 : Props: 컴포넌트에 데이터 전달 

ex)numberofline, resizeMode  <Text numberofline={3} >

 export default function Card({content}) {  : 비구조 할당. 딕셔너리로 넘겨줌. 

- 상태 : State, useState : 사용할 데이터

UI = component(state)

- useEffect : 화면에  그려진 다음 가장 먼저 실행되는함수, 컴포넌트가 그려지면 처음 실행해야 하는 함수들을 모아두는곳. 

useEffect(()=>{

},[])  : useEffect(함수, 빈리스트)

useState + useEffect : 비동기 기술 사용. 

import React,{useState,useEffect} from 'react'; export default function MainPage() { const [state,setState] = useState([])       useEffect(()=>{     setState(data)   },[]) return () }

state : 컴포넌트 안 상태변수  setState : 상태 변경위한 함수

TypeError: undefined is not an object (evaluating 'tip.map')

 

App.js : 진입부 (state)  -> props Component  (state)

                                     -> props  Component (state)

return ready ? <Loading/> :  (서비스 화면)

const [state,setState] = useState([])

const [ready,setReady] = useState(true)

useEffect(()=>{ setTimeout(()=>{ setState(data) setReady(false) },1000) },[])

카테고리 기능 

const [state,setState] = useState([]) 

const [cateState,setCateState] = useState([]) 

const [ready,setReady] = useState(true)

useEffect(()=>{ setTimeout(()=>{ setState(data.tip) setCateState(data.tip) setReady(false) },1000) },[])

setCateState(state.filter((d)=>{ return d.category == cate }))

<TouchableOpacity style={styles.middleButtonAll} onPress={()=>{category('전체보기')}}>  

cateState.map((content,i)=>{ return (<Card content={content} key={i}/>) })

Status Bar 관리

https://reactnative.dev/docs/statusbar

expo install expo-status-bar

import { StatusBar } from 'expo-status-bar';

<StatusBar style="light" />

스택네비게이션 

stack : 쌓다.

navigate :  길을 찾다. 항해하다. 다루다. : 앱에서는 페이지이동. 

https://reactnative.dev/

네비게이션 설치코드 :  yarn add @react-navigation/native

네비게이션 추가 설치코드 : expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

스택네비게이션 설치 : yarn add @react-navigation/stack

초기값 고려해야함. 

import React from 'react'; import { createStackNavigator } from '@react-navigation/stack'; import DetailPage from '../pages/DetailPage'; import MainPage from '../pages/MainPage'; const Stack = createStackNavigator(); const StackNavigator = () =>{     return (         <Stack.Navigator             screenOptions={{                 headerStyle: {                     backgroundColor: "black",                     borderBottomColor: "black",                     shadowColor: "black",                     height:100                 },                 headerTintColor: "#FFFFFF",                 headerBackTitleVisible: false             }}                     >             <Stack.Screen name="MainPage" component={MainPage}/>             <Stack.Screen name="DetailPage" component={DetailPage}/>         </Stack.Navigator>     ) } export default StackNavigator;	screenOptions : 공통옵션. 설정부분 : <Stack.Screen name="MainPage" component={MainPage}/>  <Stack.Screen name="DetailPage" component={DetailPage}/>
export default function App() {   console.disableYellowBox = true;   return (   <NavigationContainer>     <StatusBar style="black" />     <StackNavigator/>  </NavigationContainer>); }
export default function MainPage({navigation,route}) {  navigation.setOptions({ title:'나만의 꿀팁' }) return (<Card content={content} key={i} navigation={navigation}/>) onPress={()=>{navigation.navigate('DetailPage')}}> onPress={()=>{navigation.navigate('DetailPage',content)}}> DetailPage({navigation,route}) {         navigation.setOptions({             title:route.params.title,             headerStyle: {                 backgroundColor: '#000',                 shadowColor: "#000",             },             headerTintColor: "#fff",         })	네비게이션 딕셔너리 : navigation 의 setOptions, navigate 라우트 딕셔너리 : {route : {param:{title:title }}}

share -linking

expo install expo-linking

import * as Linking from 'expo-linking';

 

 

 

ButtonGroup