벌써 3주차가 되었는데 3주동안 배웠던 내용들을 복습겸 정리해 봤습니다. 틀린 부분이나 부족한 부분이 있다면 피드백 부탁드리겠습니다!

Arrow Function(화살표 함수)

기존 모양

// ex

onPress = {() => {}} 
// 원래라면 소괄호에서 중괄호로 가는 방식이지만

축약법

// ex

onPress = {() => popup()}
// 이렇게 중괄호가 사라지고 'popup' 이라는 함수가 바로 연결되어 있다.

이 방식은 함수의 도 다른 축약법인데 함수 내부에 있는 코드가 한 줄일 경우 에 중괄호를 생략 할 수 있다.

Component(컴포넌트)

우리가 버튼을 만들거나 혹은 메인 페이지의 가로 스크롤로 구현했었던 버튼들의 모음과 같이

화면의 구성 일부 하나하나들을 모두 다 컴포넌트 라고 부를 수가 있다.

즉, 전체 메인 페이지 하나를 큰 컴포넌트라고 볼 수도 있고

그 메인 페이지를 구성하는 버튼이나 이미지나 텍스트 태그 등을 모두 다 컴포넌트라고 부를 수가 있다.

이 컴포넌트들의 모음이 앱의 화면을 구성한다고 보면 된다.
(출처 : 스파르타 코딩클럽)

컴포넌트의 장점으로 재사용성에 있다.

예를 들어서 나만의 꿀팁 프로젝트에서 모듈화했던 Card 컴포넌트를 다른 프로젝트에 사용한다면

그 ‘components’ 폴더에 있는 ‘card.js’ 파일만 가지고 와서

다른 프로젝트 폴더에서 그 카드만 사용한다면 코드는 그대로 재사용할 수가 있다.

State(상태)

상태는 쉽게 말해서 데이터이다.

즉, ‘data.js’ 파일에 있는 데이터를 가져와서 코드에 입력시키고 ‘D 페이지’를 구현했을 때

아무 데이터 하나를 ‘D 페이지’ 안에 두고 나서 필요한 데이터를 꺼내서 사용하고 화면에 그리는 것이다.

이렇게 컴포넌트 안에서만 사용하는 그런 데이터 모두를 상태 라고 한다.

여기서 컴포넌트 안이라는 것은 간단히 말해

이 페이지가 메인 페이지면 메인페이지, 디테일페이지면 디테일페이지.

이렇게 팔 안에서만 사용되는 데이터를 상태값 이라고 부르며

이 데이터를 변경하거나 삭제하거나 추가하는 이런 것들을 모두 다 상태 관리 라고 부른다.

Props(속성)

부모 태그가 어떤 컴포넌트나 태그 같은 것들을 사용할 때 그 속성에다가 데이터를 넘겨주는 것을 뜻한다.

즉, 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달 하는 방식을 뜻하며

쉽게 말해서 속성은 데이터를 전달 하는 방식 을 뜻한다.

useEffect

화면에 컴포넌트를 그려지면서 처음에 실행하는 함수가 바로 ‘useEffect’ 라고 한다.

메인 페이지가 사용자들한테 보여지고 난 다음에 바로 어떠한 기능을 팝업으로 띄워서 보여주고 싶다면

팝업을 띄우게하는 함수를 실행시켜야 될 것이다.

이것처럼 화면이 유저에게 보여지고 나서 유저한테 ‘어떠한 기능을 실행시키고 싶다’,

‘알아서 자동으로 실행시키고 싶다’하는 기능들을 모두 다 모아놓은 곳이

‘useEffect’ 라는 코드인데 이건 쉽게 함수라고 생각해도 된다.

• useEffect 기본 모양

useEffect(()=>{

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

},[])

useEffect 라는 함수에 함수를 전달하고

두 번째 인자로는 빈 리스트(대괄호)를 전달하고 있는 모습이 바로 useEffect 의 사용방법이다.

category(with filter)

ex)

코드 해설

우리가 앱에서 사용하는 상태 데이터를 전부 다 state 에서 관리하고 있었는데

cateState(1️⃣)라는 것이 포함된 상태 데이터를 하나 더 만들었다.

이것은 실제 앱에서 화면에 보여질 때 사용될 상태 데이터이다.

그러면 state 는 언제 사용되냐.

전체 데이터를 보관할 때만 사용하려고 용도를 조금 바꿨다.

그래서 categoryState 라는 준말인 cateState와

이 변수를 변경시킬 때 사용하는 함수 setCateState(2️⃣)를 만들어 놨다.

setState(3️⃣)라는 이 앱 컴포넌트의 메인 페이지 컴포넌트에서 항상 가지고 있을 꿀팁 전체 데이터(4️⃣)가 state 에 담겨있어야 되니까 setState(3️⃣)로 전체 꿀팁 데이터(4️⃣)를 이렇게 준비를 시켜놨고

앞으로 카테고리 버튼을 누를 때마다 달라질 상태변수인 setCateState(5️⃣) 또한 처음에는 전체보기가  디폴트로 눌러져 있어야 되니까 전체 데이터(4️⃣)를 여기다 넣어 놨다.

그리고 데이터가 준비됐으니까 로딩 화면을 걷어내야 되서 setReady 를 false(6️⃣)로 바꿨다.

이제 카테고리의 버튼을 눌렀을 때 어떤 인터렉션이 일어나는지가 중요한건데

여기서 onPress(6️⃣)에 어떤 함수가 바인딩 되어있는지가 중요하다. 

코드를 보면 category(7️⃣) 함수가 실행 되게끔 바인딩 연결이 되어있는 모습을 볼 수가 있는데

여기는 각각의 버튼의 이름(8️⃣), 즉 어떤 카테고리인지가 전달되고 있다.

이제 카테고리 함수를 보자.

코드를 보면 카테고리 함수, 즉 전체보기 재테크 등등의 문자열이 이 cate(9️⃣)라는 변수를 넘겨받고 있다.

그럼 여기서 넘겨받는 변수가 사용되고 있는 건데 만약에 전체보기(🔟)라면

화면에 보여 주게 될 데이터는 아까 setCateState(5️⃣)에 있다고 했다.

거기 있는 상태 변수가 항상 전체 데이터(4️⃣)로 다시 채워 줘야 된다.

그래서 이 state(setState(3️⃣), setCateState(5️⃣))에는 항상 전체 데이터(4️⃣)가 들어 있는데

만약에 이 전체보기(🔟)를 누르면 setCateState(5️⃣)라는 상태 변수에 전체 꿀팁 데이터(4️⃣)가 들어가게끔 조정해 줘야 된다.

그리고 밑에 카테고리를 넣기 전에는 상태변수인 state가 들어가 있었지만 카테고리가 포함되고 state에서 cateState(1️⃣1️⃣)로 변경된 것을 볼 수가 있다.

이렇게 해서 map 함수로 반복문이 들어가고 있고 다시 위로 가면 filter 함수가 있는데

전체 상태 데이터가 들어 있는 이 state(1️⃣2️⃣)에다가 filter 함수를 달았다.

그리고 d(1️⃣3️⃣)라는 것은 항상 이 state(1️⃣2️⃣) 안에 있는 값이 떨어지게 된다.

그래서 여기 안(1️⃣4️⃣)에서 사용할 수가 있게 되고

요소 하나하나 접근할 때마다  category(1️⃣5️⃣)를 꺼내 사용하는 것이다.

또, 카테고리 함수(7️⃣ = 9️⃣)의 버튼 중에 ‘생활’ 버튼을 누르면 ‘생활’에 있는 페이지로 넘어가고

그렇게 되면 전체보기(🔟)가 아니니깐 이 마지막 조건(1️⃣6️⃣)에 해당되서 이게 실행이 될 것이다.

, cate(9️⃣)에는 ‘생활’이 있게 되고 요소 하나하나 돌릴 때마다 나오는 카테고리의 값이 생활이면

그 해당하는 값으로 리스트를 새로 만드는 것이 filter 함수의 역할이다.

따라서 filter 함수를 통해서 새로운 리스트가 만들어지게 되고 

그게 만들어지면서 바로 setCateState(1️⃣7️⃣)에 저장이 되는 것이다.

그래서 각 버튼을 누르면 그 필터에 따른 데이터가

새롭게 setCateState(1️⃣7️⃣)에 저장되면서 상태가 변경되는 것이다.

그러면 이제 화면이 새로운 데이터로 다시 그려지게 되는 것이다.

StatusBar

본격적으로 라이브러리 설치 시작!

👉 vscode에서 터미널을 이렇게 변경해주세요

(출처 : 스파르타코딩클럽)

터미널 우측 버튼중에 분할이란 버튼이 있습니다.

여러분들 터미널 왼편은 서버를 켜고 끄고를 담당하고(expo start)
터미널 우측은 필요한 라이브러리들을 설치할 때 명령어를 치는 장소로 분할해서 사용하면 편리합니다!

[코드스니펫] Expo 상태 바 설치

expo install expo-status-bar

공식 문서 : https://docs.expo.io/versions/latest/sdk/status-bar/

(출처 : 스파르타코딩클럽)

불러오는 법

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="light" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

black 일 때

light 일 때

StatusBar 는 휴대폰 상단의 바를 뜻하며

‘light’ 를 입력하면 위의 사진처럼 흰색으로 변해 사라지는 것을 볼 수가 있다.

반대로 ‘dark’ 를 입력하면 검정색으로 변해 다시 나타난다.

+ 을 입력하면 완전히 가려진다.

Navigator

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

네비게이션 설치 코드

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

(출처 : 스파르타 코딩 클럽)

긴 글 읽어주셔서 감사합니다! 🙏