[앱개발 종합반] 3주차 개발일지

1. 배운 내용

리액트 컴포넌트, 상태 관리, 속성, useEffect 배우기

Expo로 앱 상태 바 관리하기

앱 페이지 이동 기능을 위해 네비게이터와 스택네비게이션 사용해보기

앱 내에서 앱 내용을 공유하는 share 함수 사용해보기

외부 링크 클릭 이벤트 사용해보기

 

2. 새로 알게 된 내용

1) 컴포넌트와 상태를 이용한 로딩화면 만들기

Loading 컴포넌트를 만들어주고, MainPage.js에서 ready 값으로 상태를 관리한다.

1. ready 값이 true 이므로 return 구문에서 ? 물음표 바로 뒤의 Loading 컴포넌트가 화면에 그려짐

2. 화면이 그려지고 난다음, 1초 이따가 상태값들이 채워지고 변경됨

3. ready 상태 값이 false 가 됨

4. 상태값이 변경되었으므로 화면이 다시 그려짐

5. ready 값이 false 이므로 return 구문에서 : 콜론 뒤의 MainPage 컴포넌트가 화면에 그려짐

 

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

    const category = (cate) => {
        if(cate == "전체보기"){
            //전체보기면 원래 꿀팁 데이터를 담고 있는 상태값으로 다시 초기화
            setCateState(state)
        }else{
            setCateState(state.filter((d)=>{
                return d.category == cate
            }))
        }
    }

filter 함수 이용해서 category 별로 가져올 리스트 구분하기

 

3) 앱 상태 바 관리

https://docs.expo.io/versions/latest/sdk/status-bar/

StatusBar - Expo Documentation

● expo 상태 바 설치

expo install expo-status-bar
// yarn이면
yarn add expo-status-bar
// npm이면
npm install expo-status-bar

 

4) 페이지 이동하는 기능 구현 (네비게이터와 스택 네비게이션 사용)

● 네비게이션 설치 코드

// 기반
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로 시도해보세요.

● 스택 네비게이터

https://reactnavigation.org/docs/stack-navigator/

https://reactnavigation.org/docs/stack-navigator/

// createStatckNavigator 사용해보기
yarn add @react-navigation/stack

- Stack.Navigator로 네비게이터가 어떻게 보일지 조정하는 옵션을 넣음

- Stack.Screen으로 컴포넌트를 페이지로 만들어줌

// 데이터 없이 페이지 이동하기
navigation.navigate("DetailPage")
// 데이터 가지고 페이지 이동하기
navigation.navigate("DetailPage", {
	title: title
})

 

5) 앱 내에서 페이지 내용 공유하는 기능 구현

- react-native에서 Share 도구 import 해줌

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

 

6) 외부 링크 클릭 이벤트

● 외부 링크를 쓰기 위해 설치 코드

expo install expo-linking
// 안되면 yarn이나 npm 이용해서 설치하세요.

- 사용할 곳에 import 해준다. (import * as Linking from 'expo-linking;)

 

3. 느낀 점

이번주는 저번주보다 1개의 강의가 더 많아서 더 빡세게 느껴졌다. 그렇지만 리액트 기초 지식이었고, 이미 알고 있는 내용들도 있고 몰랐던 내용들도 있었는데 강의를 듣고 나서 좀 정리되는 것 같다. 앞으로 2주 남았기 때문에 더 화이팅해보자 !