[React Native] 스파르타 앱개발 종합반 3주차

3주차

[수업 목표]

1. 앱 개발을 위한 필수 리액트 기초 공부
2. 앱 다운 앱을 위한 기능 적용
3. 앱 상의 페이지 구성
   

---

[앱 필수 기초지식01] 컴포넌트

리액트 네이티브는 리액트(React.js) 라이브러리 기반으로 만들어진 프레임워크 입니다. 그렇기 때문에 기본적인 구조는 리액트를 닮아 있습니다.

대표적으로

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

네 가지가 있습니다.

• 컴포넌트로 쪼개서 관리하면 유지보수가 용이

[앱 필수 기초지식02] 속성 Props

• 사실 컴포넌트에 속성props값들을 넘겨주면 받는 쪽에서의 props 구조는 아래처럼 됨

    //props로 content, key라는 두 값을 넘겨줬을 경우
    props: {
        content: {
            ...
        },
        key: {
            ...
        }
    }

  이렇게 props그대로 사용하면 이 안에서 값들을 한 번 더 꺼내서 사용해야하기 때문에 비효율적.

  비구조화 할당을 이용하면 효율적. 바로 값 이름으로 받아와서 값 안의 값을 꺼내 씀.

  • 비구조화 할당 예시. content를 바로 씀

```jsx
<View style={styles.cardContainer}>
         {/* 하나의 카드 영역을 나타내는 View */}
         {
          tip.map((content,i)=>{
            return (<Card content={content} key={i}/>)//tip배열안의 content항목들(데이터)와 반복문이므로 유니크한 key값을 담아 보냄
          })
        }

      </View>
```

[앱 필수 기초지식02] 상태 State와 useState, useEffect

• 리액트는 상태가 바뀌어야 화면이 바뀐다. 수식으로 표현하면

    UI = component(state)

  저 공식은 즉, 사용자 화면(UI)는 컴포넌트(component)에 어떤 데이터(state)가 주입되고 변경되냐에 따라 변화된다를 뜻합니다.

• state는 useState로 생성하고 setState로 값을 변경한다.

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

    **useEffect(()=>{**
  
        ...화면이 그려진 다음 가장 먼저 실행되야 할 코드 작성 공간
  
    **},[])**

  보통 useEffect는 데이터를 준비할 때 사용합니다
  데이터를 준비한다는 것은, 데이터를 서버로부터 혹은 어디선가로부터 받은 후 상태(state)에 반영한다는 것을 뜻합니다. 이런순서로 말이죠

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

  화면이 그려진 다음, 서버에게 필요한 데이터를 요청하여 받은 후, 화면을 다시그릴때 주로 사용되는데요! 아주 일반적인 패턴이므로 여러분들도 금방 이해하고 익숙해지게 됩니다!

  ** ?? 왜 데이터를 화면이 그려진 다음에 받아오지??

  • 데이터가 로딩되지 않았을 때 화면을 그려줄 수 없어서 오류가 남

    → 데이터가 로딩될 때까지 로딩화면을 보여주고

    로딩된 후에 로딩된 데이터를 가지고 화면을 그려준 후 보여주어야 함

    → 다음시간

★[앱 필수 기초지식 응용] 컴포넌트와 상태를 이용한 로딩화면 만들기

• 데이터 로딩까지 1초 기다리는 지연함수 setTimeout 사용

    export default function MainPage() {
      console.disableYellowBox = true;
  
      const [state,setState] = useState([])
  
        const [ready,setReady] = **useState(true)**
  
      useEffect(()=>{
  
            **//뒤의 1000 숫자는 1초를 뜻함
        //1초 뒤에 실행되는 코드들이 담겨 있는 함수**
        **setTimeout(()=>{
            setState(data)
            setReady(false)
        },1000)**
  
  

  },[])

  let tip = state.tip;
    let todayWeather = 10 + 17;
  let todayCondition = "흐림"

    //처음 ready 상태값은 true 이므로 ? 물음표 바로 뒤에 값이 반환(그려짐)됨
  //useEffect로 인해 데이터가 준비되고, ready 값이 변경되면 : 콜론 뒤의 값이 반환(그려짐)
  **return ready ? <Loading/> :  (**
        //화면 그려주는 내용...
    )
```

• 화면을 그려주는 return문에 삼항연산자(조건문)를 사용해

  조건이 맞을 경우(ready라는 상태(state)가 true일 때)에만 실제 화면을 그려주도록 만듦. 조건이 안 맞으면 로딩화면을 그려줌.

  지연 함수를 이용해 일정 시간이 지난 후에 조건(ready를 true로)을 바꿔

  return문에서 화면을 그려주도록 하는 방식

★ [앱 필수 기초지식 응용] state를 이용한 카테고리 기능 넣기

• filter : 반복문의 일종. 조건문이 포함됨. 조건문의 반환값이 true인 항목에 대해서만 작업을 처리함

• 카테고리 버튼을 누를 때마다 호출되는 함수 category

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

  사용자가 전체보기를 눌렀을 경우 state(모든 꿀팁 항목)전체를 화면에 그려준다.

  여기에서 filter는 꿀팁 전체 데이터를 담고 있는 state의 꿀팁 항목들을 하나씩 d라는 이름으로 꺼내 조건을 검사한다.

  d(꿀팁항목)의 category값이 사용자가 선택한 카테고리랑 똑같은 지 확인하고,

  같다면 true를 filter함수에 return해줘서 상태값을 바꾼다(setCateState를 실행한다).

  같지 않다면 false를 return하여 상태값을 바꾸지 않는다.

  상태값이 바뀌어야만 화면이 새로 그려지므로, 카테고리가 같은 꿀팁항목들만 화면에 그려진다.

[Expo 앱다운 앱기능01] 앱 상태 바(Status Bar) 관리

• expo가 제공해주는 기능들을 활용해보자(공식문서에 다 나와있음!!)

**터미널cmd에서 뭐가 실행중인데 명령어 입력하고 싶을 때? 창 분할하기 - cmd드롭다운 누르고 Split Terminal 누르면 됨

• expo의 도구 설치. cmd창에 명령어 입력

    expo install expo-status-bar

• 도구를 꺼내쓰자

    import { StatusBar } from 'expo-status-bar';
  
    ...
  
    <StatusBar style="light" />
    //light black다양한 옵션들

Error: Request failed with status code 502

[앱 페이지 적용] 네비게이터란?, 설치, 페이지 헤더 스타일 수정 - 스택네비게이션 01~02

• 스택 네비게이션을 쓸 것

  네비게시연으로 화면을 이동할 때 화면들이 스택으로 쌓임. 뒤로가기를 눌러 이전 화면으로 갈 수 있음

  Stack.Screen : 네비게이션으로 바꿔가며 탐색할 페이지들

  Stack.Navigator : 네비게이션 부분

• 네비게이션 만들기에 필요한 도구들을 설치하자. cmd창에 입력

    //네비게이션 도구 설치
    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

• createStackNavigator 사용

  • 설치

      yarn add @react-navigation/stack

  • 네비게이션 파일을 모아둘 새 폴더 안에 새 파일 생성. 해당 파일 안의 네비게이션 기능 부분

      const StackNavigator = () =>{
          return (
    
              //컴포넌트들을 페이지처럼 여기게끔 해주는 기능을 하는 네비게이터 태그를 선언합니다.
              //위에서 선언한 const Stack = createStackNavigator(); Stack 변수에 들어있는 태그를 꺼내 사용합니다.
              //Stack.Navigator 태그 내부엔 페이지(화면)를 스타일링 할 수 있는 다양한 옵션들이 담겨 있습니다.
              <Stack.Navigator
                  screenOptions={{
                      headerStyle: {
                          backgroundColor: "black",
                          borderBottomColor: "black",
                          shadowColor: "black",
                          height:100
                      },
                      headerTintColor: "#FFFFFF",
                      headerBackTitleVisible: false
                  }}
    
              >
    
                  {/* 컴포넌트를 페이지로 만들어주는 엘리먼트에 끼워 넣습니다. 이 자체로 이제 페이지 기능을 합니다*/}
                  <Stack.Screen name="MainPage" component={MainPage}/>
                  <Stack.Screen name="DetailPage" component={DetailPage}/>
              </Stack.Navigator>
          )
      }

    <Stack.Screen name="" 부분에 들어가는 name은 네비게이션 페이지들의 이름으로 뜬다.

    <Stack.Screen>들 중 맨 위에 있는 게 첫화면으로 설정됨

  • App.js 의 return부분도 살펴보자. (import 부분도 바뀌긴 했음)

      return ( 
        <NavigationContainer>
          <StatusBar style="black" />
          <StackNavigator/>
       </NavigationContainer>);

  • 페이지 헤더 스타일을 바꿔주려면 네비게이션 파일의 <Stack.Navigator>태그의 속성에서 옵션들을 바꿔주면 됨

    ★[앱 페이지 적용] 페이지 이동하기 - 스택 네비게이션 03

  • 데이터 로딩 시 오류날 때 해결법

    1. 로딩화면 구현하기
    2. 데이터가 없을 때에 보여줄 초기 상태값 넣어놓기

  • Card.js에서 navigation.navigate 함수를 쓸때 두번째 인자로 content를 넘겨줬죠?

    content는 딕셔너리 그 자체였으므로 route.params에 고대~로 남겨옵니다.

    즉, route.params 는 content죠!

    ★[Expo 앱다운 앱기능02] 페이지 내용 공유하기

  • 리액트가 공유기능도 쉽게 만들 수 있게 제공해줌!

  • Share.share 이용

    
      import { StyleSheet, Text, View, Image, ScrollView,TouchableOpacity,Alert,**Share** } from 'react-native';
    
      const share = () => {
              Share.share({
                  message:`${tip.title} \n\n ${tip.desc} \n\n ${tip.image}`,
              });
          }

    message: 부분에 공유할 메세지에 담을 내용을 작성해주면 됨.

    ★[Expo 앱다운 앱기능03] 외부 링크 클릭 이벤트!

  • 외부링크로 연결하는 기능

  • Linking 설치하자

      expo install expo-linking

  • Linking 사용

      import * as Linking from 'expo-linking';
    
      const link = () => {
              Linking.openURL("https://spartacodingclub.kr")
          }