리액트 필수 지식, Expo

리액트 기초 지식

컴포넌트 : 정해진 엘리먼트를 사용하여 만든 화면의 일부분

상태: 컴포넌트에서 사용할 데이터

속성 : 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 방식

useEffect : 화면에 컴포넌트가 그려지면 처음 실행해야 하는 함수들을 모아두는 곳

 

컴포넌트(Component)

컴포넌트는 UI의 요소, 요소를 재사용 가능한 부분으로 조각내서 운영하는 기법
화면의 모든 부분

App.js의 큰 App함수처럼, 코드 전체를 감싸고 있는 함수를 뜻하기도 하다
App.js를 App컴포넌트라고 부를 수 있다

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

 

속성(Props)

컴포넌트에 데이터를 전달. key-value 형태
(<Text> 태그엔 style, numberOfLines등의 속성이 있다)

1.컴포넌트에 속성을 부여해줘서 전달할땐, 키-밸류, key={value} 형태로 전달
2.컴포넌트를 반복문 돌릴땐, 컴포넌트마다 고유하다는 것을 표현하기 위해, map에서 나오는 인덱스(i)를 key ={i} 속성 전달 형태로 꼭 넣기

딕셔너리에서 키값을 바로 취해서 비구조 할당 방식으로 속성 사용한다(변수로써 함수안에서 즉시 사용할 수 있는 방식){키,키,키} 형태로 꺼내 쓰면 된다

모든 속성들은 공식 문서 참고

 

상태(State,useState)

컴포넌트마다 데이터를 보유하고 관리할 수 있다. 리액트에서는 컴포넌트에서 보유/관리 되는 데이터를 상태라 부른다.

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

useState, 왜 중요할까?

리액트는 상태가 바껴야 화면이 바뀐다. 아무 데이터가 아니라 state로 관리되는 데이터가 변경되면 화면이 바뀐다.

UI = component(state)

즉, 사용자 화면UI는 컴포넌트에 어떤 데이터state가 주입되고 변경되냐에 따라 변화된다는 뜻

 

useEffect

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

useEffect(()=>{

	화면이 그려진 다음 가장 먼저 실행되어야 할 코드 작성 공간

},[]}

▲useEffect 작성 형식

보통 useEffect는 데이터를 준비할때 사용한다. 데이터를 서버로부터 혹은 어딘가로부터 받은 후 state에 반영한다는 뜻.

1.화면이 그려짐
2.useEffect가 데이터 준비
3.상태 데이터가 업데이트 되었으니 화면 다시 그려짐

 

---

 

-state를 이용한 카테고리 기능 넣기-

카테고리 기능을 위해서는 먼저 카테고리 상태가 필요하다
카테고리에 맞는 데이터를 지속적으로 저장하고 관리할 상태 그릇과 함수 필요.
카테고리에 따라 카테고리 상태 데이터를 새롭게 구성해주는 기능을 한다.

 

filter

map은 반복만 시키는 것이지만 filter는 조건이 들어가있다.

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

카테고리 맞는지 확인해서 true인 데이터만 가상의 list에 포함시켜서 출력.

 

setTimeout

시간 설정

setTimeout(()=>{
	setTate(data)
	setReady(false)
},1000)

//1초 뒤에 실행되는 코드

c.f. => onPress : 버튼 실행되면 할 일.

 

 

---

 

 

Expo 앱 다운 앱 기능/ 앱 상태바(Status Bar)관리

Expo SDK. 일명 Expo 에서 제공해주는 앱 기능 도구들을 개발할때 여기서 확인할 수 있다. (배터리, 시간 등)
Expo에서 제공해주는 라이브러리 설치하기 위해 VSCode에서 split 눌러서 창 분할. 
터미널에 expo install expo-status-bar 입력하면 설치 된다.

 

 

내비게이터란?

앱에 페이지 개념을 입혀주고 웹 사이트를 이용하듯, 만든 컴포넌트들을 앱에서 페이지화 시켜주고, 해당 페이지끼리 이동을 가능하게 해주는 라이브러리.

reactnavigation.org 공식문서 Read docs

 

보통 페이지 구성은 pages폴더 안에 생성해둔 컴포넌트로 구성한다.
react native에서 페이지 내비게이션을 구현하기란 조금 까다롭기 때문에 딱 필요한 것만 가져와서 설치하고 적용한다.

yarn을 사용할 것이기 때문에
터미널에 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

터미널에 적어서 설치.

 

설치-스택내비게이션

스택 내비게이션이란?

스택 내비게이션은 컴포넌트에 페이지 기능을 부여해주고 컴포넌트에서 컴포넌트로 이동, 즉 페이지 이동을 가능하게 해준다.
페이지는 Stack.Screen
책갈피는 Stack.Navigator라 부른다.

yarn add @react-navigation/stack

터미널에 입력 설치.

 

Stack Navigator와 Stack.Screen중첩 구조

<Stack.Navigator>
	<Stack.Screen></Stack.Screen>
</Stack.Navigator>

export default로 위에서 만든 navigator함수를 밖에서 사용할 수 있게 내보내기 한다.

Navigation을 사용하면 페이지 별로 컴포넌트화 안 시켜도 된다.

 

navigation.setOptions 페이지 제목 설정

navigation.navigate("") 스택스크린에서 name속성으로 정해준 이름을 지정해주면 해당 페이지로 이동

 

 

navigation.navigate("",{
	title: title
{)

name속성 전달해주고 두번째 인자로 딕셔너리 데이터 전달해주면 해당 페이지에서 두번째 인자로 전달된 딕셔너리 데이터를 route 딕셔너리로 받을 수 있다.

 

건네받은 페이지에서는 route에서 받아서 써야한다.

{
	route : {
    	params:{
    		title:title
            }
        }
    }

const{title} = route.params; //비구조 할당방식으로 가능.

 

 

페이지 내용 공유

import {Share} from "react-native";

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

공유하기

 

expo install expo-linking 설치

import * as Linking from 'expo-linking';

onPress에 link함수 연결

const link = () =>{
	Linking.openURL ("URL삽입")
}