[스파르타코딩클럽/앱개발 종합반] 3주차_앱 다운 앱을 위한 기능 적용

React-Native App을 만들기 위해 알아야 하는 최소한의 리액트 개념!

• 컴포넌트(Component)
• 상태(State,useState)
• 속성(Props)
• useEFfect

앱 화면이 하나라면 너무 재미없쥬?

앱 안에서 여러 페이지를 두고 버튼을 눌러 이동할 수 있는 기능을 달아보자~

 

(좌) 수업 실습 예제 (우) 크리스마스 가볼만한 곳 상세페이지 만들기

 

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

 

버튼 하나가 컴포넌트가 될 수 있고, 버튼을 모아둔 영역이 컴포넌트가 될 수 있다.

버튼 하나를 만들었을 때 이 버튼 코드를 여러 페이지에서 사용 가능하다는 뜻

 

리액트에서는 컴포넌트에서 보유/관리되는 데이터를 "상태(state)"라고 부름

상태(state는 리액트 라이브러리에서 제공해주는 useState로 생성하고 setState함수로 변경할 수 있다.

 

*useState

리액트 : 데이터에 따라 화면이 변경된다.

but, 아무 데이터가 아니라 이 상태(state)로 관리되는 데이터가 변경되면 화면이 바뀐다.

 

UI는 component에 어떤 데이터(state)가 주입되고 변경되냐에 따라 변화한다는 뜻! 

 

• useEffect

:화면이 그려진다음 가장 먼저 실행되는 함수

데이터를 준비할 때 사용, (준비한다=데이터를 서버로부터(어디선가로부터) 받은 후 상태(state)에 반영한다는 것

 

1) 화면이 그려진다

2) useEffect가 데이터를 준비한다

3) 상태 데이터가 업데이트 되었으니 화면이 다시 그려진다

 

화면이 그려진다 > 서버에서 필요한 데이터 요청하여 받은 후 > 화면을 다시 그릴때 주로 사용

 

화면이 그려질때 준비된 데이터가 없어서 오류가 난다?! > 로딩화면을 만들자

 

 

 

• 상태바 만들기

Expo 상태 바 설치

expo install expo-status-bar

<StatusBar style="black" />

 

• 네비게이터 사용하기

앱에 페이지 개념을 입혀주고, 해당 페이지끼리 이동이 가능하게 해주는 라이브러리

 

*스택 네비게이션이란?

컴포넌트에 페이지 기능을 부여해주고, 컴포넌트에서 컴포넌트로 이동(=페이지 이동)을 가능하게 해준다.

 

페이지 = Stack.Screen

책갈피 = Stack.Navigator

 

• 공유 기능과 외부 링크 추가

import { Share } from "react-native";

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

}

실습_공유하기 버튼 만들기 + 공유 링크

 

• 외부 링크 추가

import * as Linking from 'expo-linking';

const link = () => {
	Linking.openURL("https://www.naver.com/")
}

외부링크를 클릭하면 구글지도 웹페이지로 넘어가게 설정하였다

 

3주차에 핵심기능을 꽉꽉 배운 것 같다.

페이지에서 페이지로 이동 (네비게이터, 상태, 컴포넌트, 속성)

스플래시화면,

외부링크, 공유하기 구현하기