스파르타코딩클럽 3주차_[정리]

출처 : 스파르타코딩클럽 강의자료

앱 기초지식 #1

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

앱 기초지식 #2

<상태(state)와 useEffect>

UI = component(state)

=> 사용자 화면(UI)는, 컴포넌트에 어떤 데이터(state)가 주입되고 변경되냐에 따라 변화한다.

=> React는 상태(state)가 변화할 때마다, 화면을 다시 그린다.

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

즉, useEffect()는 다음과 같은 순서를 따라 실행된다!!

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

그러나, 화면이 먼저 그려진 뒤에 실행되는 것이기 때문에

맨 처음 화면을 그릴 때 데이터가 없다면 오류가 발생!!

=> 이를 방지하기 위해, Loading화면을 만들어
데이터가 준비될 때까지 기다리기도 한다.

내비게이터(Navigator)

Navigator : 컴포넌트들을 페이지화해 주고, 해당 페이지끼리 이동을 가능하게 해 주는 라이브러리

<사용 방법>

1. 기본 사용


1) 사용 준비

import React from 'react';
//설치한 스택 네비게이션 라이브러리를 가져옵니다
import { createStackNavigator } from '@react-navigation/stack';

//페이지로 만든 컴포넌트들을 불러옵니다
import DetailPage from '../pages/DetailPage';
import MainPage from '../pages/MainPage';

//스택 네비게이션 라이브러리가 제공해주는 여러 기능이 담겨있는 객체를 사용합니다
//그래서 이렇게 항상 상단에 선언하고 시작하는게 규칙입니다!
const Stack = createStackNavigator();

2) 기본 틀

//리액트의 모~든 파일은 컴포넌트라 생각하고
//페이지 기능을 해주는 모든 기능이 담겨 있는 컴포넌트를 만든다 생각하세요!
const StackNavigator = () =>{
    return (
				/// 페이지 기능이 들어갈 곳
    )
}

export default StackNavigator;

3) 스크린 옵션

    //컴포넌트들을 페이지처럼 여기게끔 해주는 기능을 하는 네비게이터 태그를 선언합니다.
        //위에서 선언한 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>

4) 페이지 연결

    
    {/* 컴포넌트를 페이지로 만들어주는 엘리먼트에 끼워 넣습니다. 이 자체로 이제 페이지 기능을 합니다*/}
<Stack.Screen name="MainPage" component={MainPage}/>
<Stack.Screen name="DetailPage" component={DetailPage}/>

2. navigation과 route

MainPage.js

export default function MainPage({navigation,route}) { 
  ...
  ...
}

1) navigation.setOptions _ 페이지 제목 설정

navigation.setOptions({
  title: '나만의 꿀팁'
})

2) navigation.navigate _ 해당 페이지로 이동

navigation.navigate("DetailPage")

3) route _ 전달받은 데이터를 받는 route 딕셔너리

//비구조 할당 방식으로 route에 params 객체 키로 연결되어 전달되는 데이터를 꺼내 사용
//navigate 함수로 전달되는 딕셔너리 데이터는 다음과 같은 모습이기 때문입니다.
/*
 {
		route : {
			params :{
				title:title
			}
		}
	}

*/
const { title} = route.params;