앱개발 종합반 3주차

□ [왕초보] 나만의 수익성 앱, 앱개발 종합반 (3주차 과정)

~ 22.03.21(월)

◎ 앱 필수 지초지식

1) 컴포넌트(Component) : 정해진 엘리먼트들(요소)을 사용하여 만든 화면의 일부분
2) 상태(State) : 컴포넌트에서 데이터를 유지하고 관리하기 위한 유일한 방법 == 그냥 사용할 데이터!
3) 속성(Props) : 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 방식 == 그냥 데이터 전달!
4) useEffect : 화면에 컴포넌트가 그려지면 처음 실행해야 하는 함수들을 모아두는 곳

◎ 컴포넌트(Component)

• 화면의 모든 부분
• 여러 부분으로 나누어 Component화 시키면 관리 용이

◎ 속성(Props)

• 쉽게 생각해서 컴포넌트에 데이터를 전달함
• 해당 엘리먼트들이 태어날 때부터 가지고 있는
  속성이 있음

◎ 상태(State)

• 컴포넌트에서 보유/관리 되는 데이터
• 사용자 화면(UI)는 컴포넌트(component)에 어떤 데이터(state)가 주입되고 변경되냐에 따라 변화된다.

◎ useEffect

• 화면이 그려진다음 실행시키고 싶은 함수를 작성한다면 가장먼저 실행이 됩니다.

사용방법

useEffect(()=>{
	...화면이 그려진 다음 가장 먼저 실행되야 할 코드 작성 공간
},[])

ex>

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

useEffect(()=>{
    setState(data)
  },[])

◎ 로딩화면의 필요성

• 화면이 그려지는 절차
  1) 화면이 그려진다
  2) useEffect가 데이터를 state에 useState를 이용하여 업데이트한다
  3) 상태(state)가 변경되었으니 화면이 다시 그려진다
• 그려질때 준비된 데이터가 없다!? -> 오류 발생
• 특정 상태값을 통해, n초뒤에 값이 변경되게 하여 그 전에는 로딩화면을, 그 후에는 띄우고 싶은 화면을 띄움.

◎ 상태 바

• 라이브러리 설치

expo install expo-status-bar

• 라이브러리 사용

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


<StatusBar style="black" />

• 이외 스타일은 공식문서를 참고
  https://docs.expo.dev/versions/latest/sdk/status-bar/

◎ 네비게이터 사용하기

• 웹 사이트를 이용하듯, 앱에서 여러분들이 만든 컴포넌트들을 페이지화 시켜주고, 해당 페이지끼리 이동을 가능하게 해주는 라이브러리
• 라이브러리 설치

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

해당 작업을 하고 node_modules 파일 확인하는 것을 추천
만약에 @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 (

        //컴포넌트들을 페이지처럼 여기게끔 해주는 기능을 하는 네비게이터 태그를 선언합니다.
        //위에서 선언한 const Stack = createStackNavigator(); Stack 변수에 들어있는 태그를 꺼내 사용합니다.
        //Stack.Navigator 태그 내부엔 페이지(화면)를 스타일링 할 수 있는 다양한 옵션들이 담겨 있습니다.
        <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;

• 공식 문서를 참고하여 Stack Navigator의 ScreenOption을 설정. https://reactnavigation.org/docs/stack-navigator/#props

//navigation 객체가 가지고 있는 두 함수(setOptions와 navigate)

//해당 페이지의 제목을 설정할 수 있음
navigation.setOptions({
   title:'나만의 꿀팁'
})

//Stack.screen에서 name 속성으로 정해준 이름을 지정해주면 해당 페이지로 이동하는 함수
navigation.navigate("DetailPage")

//name 속성을 전달해주고, 두 번째 인자로 딕셔너리 데이터를 전달해주면, Detail 페이지에서 
//두번째 인자로 전달된 딕셔너리 데이터를 route 딕셔너리로 로 받을 수 있음
navigation.navigate("DetailPage",{
  title: title
})


//전달받은 데이터를 받는 route 딕셔너리
//비구조 할당 방식으로 route에 params 객체 키로 연결되어 전달되는 데이터를 꺼내 사용
//navigate 함수로 전달되는 딕셔너리 데이터는 다음과 같은 모습이기 때문입니다.
/*
  {
		route : {
			params :{
				title:title
			}
		}
	}

*/
const { title} = route.params;

◎ 공유(Sharing) 기능

import { Share } from "react-native";

const share = () => {
        Share.share({
            message:`${tip.title} \n\n ${tip.desc} \n\n ${tip.image}`,
        });
    }

◎ 링크연결(Linking) 적용

expo install expo-linking

import * as Linking from 'expo-linking';

 const link = () => {
        Linking.openURL("https://spartacodingclub.kr")
    }