3주차 때 배울 목표
- 리액트 필수 지식 활용
- Expo 기능 사용
- 페이지 적용
- 앱다운 앱을 만들기 위해 사용할 리액트 네이티브와 Expo 기능들
- 앱에 페이지 기능 넣기
flex를 쓸 때,
자식 태그들의 고유한 영역을 지정해주고 싶을 때 사용한다.
flex를 쓰지 않을 때,
부모 태그가 영역이 지정되어 있을 때에는, justifyContent와 alignItems를 사용해 아이템들을 가운데 정렬 시킬 수 있다.
내 핸드폰은 안드로이드인데, 안드로이드에서는 상단바에 내용이 출력되는 문제가 있었다.
배경화면을 #000(검정색)으로 설정하면 상단바가 아예 보이지 않는 문제가 발생하여 상단바에 공간을 비워두고 앱 화면을 만드는 것을 어떻게 할 수 있을지 찾아보았다.
스파르타코딩클럽에서 하는 슬랙스에서 다른 어떤 분도 동일한 문제를 갖고 계셔서 쉽게 해답을 찾을 수 있었다.
expo에 SafeAreaContext 모듈을 설치하는 방법이었다.
expo install react-native-safe-area-context
터미널에 코드를 작성하고, 전체 코드를 로 감싸주면 상단바를 따로 분리하는 화면이 출력된다.
(상단바가 분리되지 않을 때)
(상단바가 분리되었을 때)
상단바가 분리되면서 화면 하단도 조금 더 많이 공간이 생기게 되었지만, 점차 해결해 나가기로 하였다.
나중에 할 수 있다면 앱 화면을 켰을 때 배경화면과 상단바가 색은 동일하지만, 상단바의 글씨 색은 다르게 하여 눈에 띌 수 있게 만들어 보고 싶다.
⠀
⠀
리액트 기초지식
- 컴포넌트: 정해진 엘리먼트들을 사용하여 만든 화면의 일부분
- 상태: 컴포넌트에서 데이터를 유지하고 관리하기 위한 유일한 방법 == 그냥 사용할 데이터
- 속성: 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하느 방식 == 그냥 데이터 전달
- useEffect: 화면에 컴포넌트가 그려지면 처음 실행해야 하는 함수들을 모아두는 곳
1) 컴포넌트는 앱 화면에 나타나는 모든 UI들을 쪼개서 운영하는 기법이기 때문에 유지보수가 편리하다는 장점이 있다. 즉, 화면의 모든 부분을 뜻한다.
(직접 태그를 만들 수 있다.)
2) 속성(Props)
속성은 컴포넌트에 데이터를전달한다는 것이다. JSON처럼 key와 value의 형태이다.
비구조 할당 방식: props의 구조
props:{ content: { }, key: { } }
비구조 방식으로 넘어오는 데이터들을
export default function Card({content}) {} 처럼 content에서 쉽게 꺼내 쓸 수 있게 해준다.
3) 상태
컴포넌트 안에서 데이터를 관리하는 방법인 상태:
상태(State,useState)
데이터에 따라서 화면이 바뀔려면 항상 상태(state)로 데이터가 관리되어야 한다. 즉, 상태로 관리하던 데이터가 변경이 되면, 화면이 바뀐다.
ex) 주식 앱 - 상태로 관리하던 데이터가 바뀌면, 화면을 다시 그려준다.
UI = User Interface
UI = component(state)
useEffect(() => {
화면이 그려진 다음 가장 먼저 실행되어야 할 코드 작성 공간
}, {})
useState 사용법
[state,setState] 에서 state는 이 컴포넌트에서 관리될 상태 데이터를 담고 있는 변수
setState는 state를 변경시킬때 사용해야하는 함수
useState()안에 전달되는 값은 state 초기값
const [state,setState] = useState([])
UseState가 컴포넌트 안에서 상태관리를 할 수 있게 변수(state)와 상태를 변경시킬 수 있는 함수(setState)를 준다. 이 변수와 함수를 통해 컴포넌트 안의 데이터들을 관리하는데, useEffect 함수 안에서 하게 된다.
useEffect(()=>{ setState(data) },[])
useEffect를 사용하는 것은 - return 문이 실행되어 화면이 그려진다음 실행되는 함수이다.
그런데, 화면이 다 그려지기도 전에 (return이 실행되기도 전에) 상태(state)에 있는 데이터를 가져오려 하면, state 변수에는 아무 데이터도 존재하지 않기 때문에 오류가 발생한다.
=> 이 해결책으로 로딩화면을 보여주면서 페이지의 데이터들이 로드될 때까지 기다려주고, useEffect 함수를 실행시킨다면, 오류가 해결될 수 있을 것이다.
const [state,setState] = useState([]) useEffect(()=>{ setState(data) },[]) let tip = state.tip; let todayWeather = 10 + 17; let todayCondition = "흐림" return ( .... )
상태로 컴포넌트를 관리하지만, 상태의 데이터가 없어서 오류가 나는 것은 앱 개발 상에서 빈번하니, 개발 중 오류가 발생하면, 상태에 데이터가 없어서 발생하는 오류인지 체크하면 좋을 듯 하다!!
상태를 컴포넌트 안에 무수히 많을 수 있다!
관리할 상태이름과 함수는 자유롭게 정할 수 있고, 초기 상태값으로 리스트, 참거짓형, 딕셔너리, 숫자, 문자 등등 다양하게 들어갈 수 있다.
const [ready,setReady] = useState(true)지연함수 : setTimeout() 주어진 시간후 함수 안에 있는 코드를 실행하라는 의미
setTimeout(()=>{ setState(data) setReady(false) },1000)
return ready ? < Loading /> : (...)
ready의 상태에 따라서 ready 중이면(true) < Loading />를 출력하고, ready가 false면 ( mainPage ) 안에 있는 데이터를 출력시킨다. (삼항연산자)
카테고리라는 함수를 만들어서 카테고리별로 팁들을 볼 수 있게 한다.
const category = (cate) => { if(cate == "전체보기"){ //전체보기면 원래 꿀팁 데이터를 담고 있는 상태값으로 다시 초기화 setCateState(state) }else{ setCateState(state.filter((d)=>{ return d.category == cate })) } }
cate라는 변수가 category 함수에 넘어가게 된다.
state 안에는 전체 꿀팁이 들어가 있다. 그래서 '전체보기'라는 단어가 cate에 들어오면 setCateState로 모든 tip들을 다시 불러와 뿌려주게 되고, 다른 것들(else)가 들어오면, fliter를 통해 걸러진 카테고리가 들어오면 그것을 뿌려주게 된다. fliter에는 조건문이 들어간다. (return 옆에 있는 코드)
들어온 카테고리(cate)가 state에 들어온 얘들 중에서 동일한 얘들을 골라 새롭게 리스트를 만들어서, setCateState 함수에다 넘겨주게 된다.
==> 그래서 매번 들어오는 데이터에 따라서 처리하는 코드가 달라지기 때문에 달라지는 데이터 따라 화면이 달라지게 된다.
전체 팁들을 불러오는 상태 하나, 카테고리별로 내용을 다룰 수 있는 상태 하나, 준비된 상태인지 확인하는 상태 하나로 구분한다.
(앞에서 혼자 상태바에 대해서 공부하며 찾아보았는데, 수업에서도 다루다니...)
⠀
앱 상태 바(State Bar) 관리하기
cmd 창에
import { StatusBar } from 'expo-status-bar';Status Bar 관련 모듈 설치해주고,
import { StatusBar } from 'expo-status-bar';이 코드와
상위 코드 바로 아래에<StatusBar style="dark" />이 코드를 입력해준다.
StatusBar 태그에 사용되는 style은 공식문서를 참고하면 좋다.
ex) light, dark, auto, inverted
⠀⠀
네비게이터
페이지를 이동할 수 있는 기능
리액트 네이티브의 한 모듈로 볼 수 있다.
React Navigation
⠀공식문서 확인하러 가기 -->
cmd 창에서 설치하는 모듈 코드
1) yarn add @react-navigation/native 2) expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
스택 네비게이션 ⠀⠀⠀⠀
앱은 페이지가 쌓이는 구조이다. 그렇기 때문에 stack이라 불린다.
- Stack.Screen: 페이지
- Stack.Navigator: 책갈피
스택 네비게이터를 설치하는 코드
yarn add @react-navigation/stack
stack의 대략적인 구조
import { createStackNavigator } from '@react-navigation/stack'; // 페이지로 만든 컴포넌트들을 불러온다. import MainPage from '../pages/MainPage'; const Stack = createStackNavigator(); const StackNavigator = () =>{ return ( //페이지 기능이 들어가는 곳 <Stack.Navigator .... > <Stack.Sreen /> </Stack.Navigator>
<Stack.Navigator>로 감싸는 태그가 있어야 한다.
스크린 옵션: 컴포넌트들을 페이지처럼 여기게 해주는 기능을 하는 네비게이터 태그를 선언하고, 태그 내부에 페이지 화면을 스타일링 할 수 있는 다양한 옵션들이 있다.
<Stack.Navigator screenOptions={{ headerStyle: { backgroundColor: "black", borderBottomColor: "black", shadowColor: "black", height:100 }, headerTintColor: "#FFFFFF", headerBackTitleVisible: false }} >
페이지를 뜻하는, <Stack.screen> 태그에 연결할 컴포넌트를 끼워 넣는다.
<Stack.Screen name="MainPage" component={MainPage}/> <Stack.Screen name="DetailPage" component={DetailPage}/>
컴포넌트를 페이지화 하고, 페이지를 이동할 수있는 네비게이션(새 페이지)도 준비가 되었다면 최상단 컴포넌트인 App.js에 네비게이션 기능을 달아야 한다.
==> 그래야 앱 어디서든 원하는 페이지로 이동이 가능하기 때문이다.
<Stack.screen>에 있는 속성 중에 name은 페이지 상단에 뜨는 이름을 뜻한다.
- navigatin.etOptions: 페이지의 제목을 변경하거나, 특정 페이지의 헤더의 스타일을 바꾸는 도구
- navigation.navigate(" "): 페이지 이동 시키는 도구
- navigation.navigate(" ", { }) : 데이터를 함께 건내주는 도구
- route:전달받은 데이터를 받는 route 딕셔너리이다. 비구조 할당 방식으로 route에 params 객체 키로 연결되어 전달되는 데이터를 꺼내 사용할 수 있다.
⠀
⠀
Card.js에 각 카드의 영역을 TouchableOpacity로 부여하고, onPress(눌렸을 때)될 때, navigation으로 DetailPage로 넘어갈 수 있게 한다.
***데이터 없이 페이지 이동하기 --> 페이지 이동시 다 똑같은 DetailPage로 이동한다...
<TouchableOpacity style={styles.card} onPress={()=>{navigation.navigate('DetailPage')}}>
정보 공유하기!
onPress={()=>share()}
어떤 내용이 공유될지 지정해 주는 함수로 share = () => { Share.share{ message: })} 를 사용하여 정해준다.
const share = () => { Share.share({ message:`${tip.title} \n\n ${tip.desc} \n\n ${tip.image}`, }); }
⠀
외부 링크 클릭 이벤트
외부 링크로 넘어가게 하려면 모듈을 추가해야 한다.
expo install expo-linking
DetailPage에
import * as Linking from 'expo-linking';
코드를 넣으면 외부링크를 달 수 있게 되고, 새로운 버튼을 추가해, 클릭시 정해둔 링크로 넘어갈 수 있게 한다.
<TouchableOpacity style={styles.button} onPress={()=>link()}><Text style={styles.buttonText}>외부 링크</Text></TouchableOpacity> const link = () => { Linking.openURL("https://spartacodingclub.kr") }
*as Linking -> 도구의 이름을 Linking이라 하겠다는 의미
과제
지난주 과제로 했던 AboutPage를 현재 페이지에 연동하여 소개 페이지 버튼을 만들어서 보여지게 하는 것이 첫번째 과제였다.
소게 페이지 - 핑크색 버튼을 누르면 AboutPage가 나온다.
두번째 과제,
꿀팁 찜 페이지를 만드는 것이었다.
꿀팁 찜 버튼을 누르면 다른 페이지로 이동하여 꿀팁으로 지정된 카드들만 모아서 보여주는 페이지를 만든 것이다.
처음에 혼자 구현해 보았는데, 선생님이 주신 가이드와 조금씩 다른 부분이 있어서 다른 부분들을 수정해 나가면서 과제를 완료하였다.
(과제를 제출하고 나서 알게 된 사실인데,, AboutPage의 상태바를 화이트로 조정하는 것을 하지 못했다는 것을 알게 되었다... 이미 제출했으니.. 어쩔 수 없지.. ㅎㅎ) + (다시 수정하고 제출했음!!)
⠀
⠀
3주차 내용을 하면서, 앱이라는 것이 완성되어 가는 모습을 내 손으로 만들어 볼 수 있다는 것이 재미있고, 새로운 경험이 되었던 것 같다.
하지만, 정말 스파르타 답게 내용도 많고 다루는 것들이 너무 많아 따라가기 벅찬감은 없지 않아 많은 것 같다...
사실 지금 앱을 만드는 것은 복사 붙여넣기식으로 선생님이 만들어 놓으신 코드를 붙여 넣는 방법으로 앱을 만드는데, 다시 코드 리뷰를 하는 것이 정말 중요하겠다는 생각을 한다. 내가 코드들을 보고 이해할 수 없다면, 그 코드들은 내 것이 되지 못하기 때문이다. 그러니 힘들더라도 코드 리뷰를 확실히 하자!!ㅠㅠ!!!
종강을 했는데, 매주 수업을 듣고 과제를 하는게 기분이 그리 좋지는 않지만,,, ㅋㅋㅋㅋ 그래도 수업 내용이 내가 흥미 있는 부분이라서 그나마 즐겁게 즐기며 공부할 수 있는 것 같다. 이제 반도 안남았으니 더 열심히 해보자!!!
*** 코드 리뷰 중요하다!!!
