[앱개발]-리액트개념 React-navigation StatusBar
📕 세 번째 일지
[일지 내용]
- 앱 개발을 위한 리액트 기초
- StatusBar
- React-navigation
💡 리액트 기초 개념
리액트 네이티브 앱을 만들기 위해 알아야 하는 최소한의 리액트 개념 4가지
-
컴포넌트(Component): 정해진 엘리먼트들(요소)을 사용하여 만든 화면의 일부분
-
상태(State,useState): 컴포넌트에서 데이터를 유지하고 관리하기 위한 유일한 방법
== 그냥 사용할 데이터 -
속성(Props): 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 방식
== 그냥 데이터 전달 -
useEffect: 화면에 컴포넌트가 그려지면 처음 실행해야 하는 함수들을 모아두는 곳
🔍 컴포넌트(Component)
- 컴포넌트는 UI의 요소, 요소를 재사용 가능한 부분으로 조각내서 운영하는 기법이다.
리액트 기반으로 만들어진 페이스북 웹사이트는 운영되는 컴포넌트가 수만 가지라고 한다.
컴포넌트는 즉, 화면의 모든 부분이다.
그리고 컴포넌트란 App.js의 큰 App 함수처럼, 코드 전체를 감싸고 있는 함수를 뜻하기도 한다.
버튼 하나가 컴포넌트가 될 수 있고, 버튼을 모아둔 영역이 컴포넌트가 될 수 있다.
- 보통 컴포넌트들은 components 폴더에 모아두면서 관리하곤 한다.
🔍 상태( State , useState)
- 컴포넌트마다 데이터를 보유하고 관리할 수 있습니다. 데이터라고 불러도 되지만,
리액트에서는 컴포넌트에서 보유/관리되는 데이터를 상태 라 부릅니다.
리액트에서 상태( state )는 리액트 라이브러리에서 제공해주는 useState 로 생성하고
setState 함수로 정/변경 할 수 있다. (UI = component(state))
🔍 속성(Props)
- 속성은 쉽게 생각해서 컴포넌트에 데이터를 전달한다는 것이고,
그 전달 모습은 키와 벨류의 형태이다.
속성엔 어렵지 않은 규칙이 숨어 있다.
- 컴포넌트에 속성(데이터)을 부여해 줘서 전달할땐,
키와 벨류( content={content} ) 형태로 전달해 줘야 할 것
- 컴포넌트에 속성(데이터)을 부여해 줘서 전달할땐,
- 컴포넌트를 반복문 돌릴 땐, 컴포넌트마다 고유하다는 것을 표현하기 위해,
map에서 나오는 인덱스(i)를 key = {i} 속성 전달 형태로 꼭 넣어줄 것.
- 컴포넌트를 반복문 돌릴 땐, 컴포넌트마다 고유하다는 것을 표현하기 위해,
🔍 useEffect(화면이 그려진다음 가장 먼저 실행되는 함수)
- useEffect는 너무 간단하고 유용하게 쓰이는 리액트 기본 제공 함수이고
화면이 그려진 다음 가장 먼저 실행되는 함수이다.
useEffect(()=>{ ...화면이 그려진 다음 가장 먼저 실행되야 할 코드 작성 공간 },[])
보통 useEffect는 데이터를 준비할 때 사용한다.
데이터를 준비한다는 것은,
데이터를 서버로부터 혹은 어디선가로부터 받은 후 상태(state)에 반영한다는 것을 뜻한다.
주로 예를 들어 아래 순서로 이루어진다.
- 화면이 그려진다
- useEffect가 데이터를 준비한다
- 상태 데이터가 업데이트 되었으니 화면이 다시 그려진다
💡 상태 바( StatusBar )
- 앱이 앱에 따라 모바일 맨 위 상태 바가 변하는 앱이 있다.
상태바란 바로 이런것을 말한다. 우리가 매일 같이 보게 되는
🔍 StatusBar
Expo 상태 바 설치
expo install expo-status-bar //import import { StatusBar } from 'expo-status-bar'; //사용 <StatusBar style="black" /> //style 이 light 일 때와, black 일 때가 다르다. // 배경색이 검은색일 경우 위와 같이 스타일을 설정하면 상태 바가 같은 블랙이므로 보이지 않는다.
상태 바는 컴포넌트마다 다르게 적용할 수도 있고, 앱 전체에 공통적으로 적용할 수 있다.
- 상태 바 속성은 공식문서에 다양하게 존재한다.
- Status Bar 공식문서
💡 React-navigation(네비게이터, 네비게이션)
- 앱에 페이지 개념을 입혀주고 웹 사이트를 이용하듯,
앱에서 만든 컴포넌트들을 페이지화 시켜주고,
해당 페이지끼리 이동을 가능하게 해주는 라이브러리이다. - react-navigation 공식문서
React-navigation 라이브러리 또한 Expo에서 지원하고 있는 도구로써
Expo와 함께 사용하기 좋다.
//네비게이션 설치 코드 //yarn yarn add @react-navigation/native //네비게이션 추가 설치코드 expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-navigation/native
🔍 스택 네비게이션이란?
- 스택 네비게이션은 컴포넌트에 페이지 기능을 부여해 주고
컴포넌트에서 컴포넌트로 이동, 즉 페이지 이동을 가능하게 해준다.
컴포넌트를 페이지화 시키는 스택 네비게이션은 다음과 같다.
-
페이지처럼 만든 컴포넌트를, 정말 페이지처럼 사용할 수 있게끔 페이지로 컴포넌트를 감싸 페이지로 만들어준다.
-
만든 여러 페이지들을 책갈피 기능을 하는 스택 네비게이터에 모조리 등록시켜서,
언제든지 페이지 이동이 가능하게끔 해준다.
페이지는 Stack.Screen 이라 부르며
책갈피는 Stack.Navigator 라 부른다.
//스택 네비게이터 설치 코드
yarn add @react-navigation/stack
🔍 스택 네비게이터 코드 분석
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}/>
감사합니다 😊
Author And Source
이 문제에 관하여([앱개발]-리액트개념 React-navigation StatusBar), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dlghgus5656/앱개발-vb06gkj3저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)