리액트 네이티브 앱을 만들기 위해서 알아야 하는 최소한의 리액트 개념
> 앱 코드를 체계적으로 관리할 수 있고 화면안에서 데이터를 자유자재로 관리할 수도 있습니다.
- 컴포넌트(Component)
- 상태(State,useState)
- 속성(Props)
- useEffect
최소한의 리액트 개념을 배우는 이유는 리액트 네이티브(React Native)는 리액트(React.js) 기반으로 만들어진 앱 개발 기술이기 때문이에요.
리액트 도식화 구조
ex)app.js라는 진입부 파일이 있으면 그 파일에 데이터를 떨어뜨려놓는다. 그러면 그 위 진입부 파일에서부터 가지치는 데이터들이 전달되고, 그 다음 사용자가 보고있는 화면이 활성화 되며, 다른페이지로 넘어갈 시 또 데이터가 위 부모로부터 내려와서 그 데이터 상태(State)이름으로 관리되면서 앱페이지가 운영된다.(ex종이컵 탑쌓기)
리액트 네이티브는 리액트(React.js) 라이브러리 기반으로 만들어진 프레임워크 입니다. 그렇기 때문에 기본적인 구조는 리액트를 닯아 있습니다.
대표적으로
1) 컴포넌트(Component) : 정해진 엘리먼트들(요소)을 사용하여 만든 화면의 일부분.
메인페이지의 가로 스크롤로 구현했었던 버튼 모음.화면의 구성 일부 하나하나들을 모두 컴포넌트라고 한다. 메인페이지를 큰 컴포넌트라고 볼수있고,메인페이지라고 할 수 있는 버튼이나 이미지,텍스트 태그 등도 해당된다.
컴포넌트는 즉, 화면의 모든 부분입니다. 그리고 컴포넌트란 App.js의 큰 App 함수처럼, 코드 전체를 감싸고 있는 함수를 뜻하기도 합니다. 따라서 App.js를 App 컴포넌트라고도 부를 수 있습니다.
버튼 하나가 컴포넌트가 될 수 있고, 버튼을 모아둔 영역이 컴포넌트가 될 수 있습니다. 이렇게 컴포넌트로 생각하고 앱을 개발해 나아간다면, 코드 재사용이 용이 해집니다. 코드 재사용이란 어려운 용어는 아니고, 버튼 하나를 만들었을 때 이 버튼 코드를 여러 페이지에서 사용 가능하다는 뜻입니다.
MainPage.js에서 Card.js로 데이터를 넘기고 있는 모습.이를 속성을 넘긴다! 라고 보통 일컫는다.
장점 : 재사용성. 컴포넌트에 있는 js에 있는 파일만 프로젝트에서 사용할 경우 사용할 수 있다.
2) 상태(State) : 컴포넌트에서 데이터를 유지하고 관리하기 위한 유일한 방법 == 그냥 사용할 데이터!.
상태 == 데이터 data.js에 있는 파일 데이터를 가져와서 화면에 뿌리고,그 데이터를 꺼내서 가지고 화면에 그렸다.그 데이터들을 컴포넌트 안에서만 사용하는 데이터를 상태라고 한다.파일 안에서 사용되는 데이터를 상태값이라고 함.이 데이터를 변경하거나 삭제,추가하는 것을 모두 상태관리라고 한다.
컴포넌트마다 데이터를 보유하고 관리 할 수 있습니다. 데이터라고 불러도 되지만, 리액트에서는 컴포넌트에서 보유/관리 되는 데이터를 상태라 부릅니다. 리액트에서 상태(state)는 리액트 라이브러리에서 제공해주는 useState로 생성하고 setState 함수로 정/변경 할 수 있습니다.리액트는 특이한 점이 있습니다. 여러분이 만드는 화면은 데이터에 따라 변경됩니다 또 아무 데이터가 아니라 이 상태(state)로 관리되는 데이터가 변경되면 화면이 바뀝니다.
리액트의 컴포넌트와 상태를 설명할 때.
UI = component(state)사용자 화면(UI)는 컴포넌트(component)에 어떤 데이터(state)가 주입되고 변경되냐에 따라 변화된다를 뜻합니다
<Card/> 컴포넌트에도 속성이 존재합니다. 우리가 부여 하면 부여하는 대로 속성이 되는 겁니다. 예를 들어 Card를 사용하는 곳에서<Card image={'이미지 주소'}/> 라고 속성을 써 넣으면, 이 <Card/>는 image라는 속성이름에 {'이미지 주소'} 값을 을 갖게 됩니다. 즉 키와 벨류의 값을 갖게 됩니다
1. 컴포넌트에 속성(데이터)을 부여해줘서 전달할땐, 키와 벨류(content={content}) 형태로 전달해줘야 할 것
2. 컴포넌트를 반복문 돌릴땐, 컴포넌트마다 고유하다는 것을 표현하기 위해, map에서 나오는 인덱스(i)를 key = {i} 속성 전달 형태로 꼭 넣을것! 입니다.
3) 속성(Props) : 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 방식 == 그냥 데이터 전달!
부모태그가 컴포넌트나 태그 같은 것들을 사용할 때 그 속성에다가 데이터를 넘겨주는것
속성은 쉽게 생각해서 컴포넌트에 데이터를 전달한다는 것이다. 그 전달 모습은 키와 벨류의 형태입니다.
속성을 부여받은 컴포넌트에서 해당 속성 값을 받아서 사용 할 수 있다.
비구조 할당 방식
딕셔너리에서 키값을 바로 취해서 변수로써 함수안에서 즉시 사용할 수 있는 방식.이 방식으로 넘겨준 키값을 {키,키,키} 비구조 할당 방식으로 바로 꺼내서 사용
4) useEffect : 화면에 컴포넌트가 그려지면 처음 실행해야 하는 함수들을 모아두는 곳.
처음 실행되는함수.ex) 메인페이지가 사용자들 한테 보여지고 난 다음 원하는 기능을 뭔가 실행시키고 싶다면(자동) 그 기능들을 모아둔 곳
useEffect(()=>{
...화면이 그려진 다음 가장 먼저 실행되야 할 코드 작성 공간
},[])useEffect(()=>{ },[]) 이 안에서, 화면이 그려진다음 실행시키고 싶은 함수를 작성한다면 가장먼저 실행이 됩니다.
보통 useEffect는 데이터를 준비할 때 사용합니다 데이터를 준비한다는 것은, 데이터를 서버로부터 혹은 어디선가로부터 받은 후 상태(state)에 반영한다는 것을 뜻합니다.
1) 화면이 그려진다
2) useEffect가 데이터를 state에 useState를 이용하여 업데이트한다
3) 상태(state)가 변경되었으니 화면이 다시 그려진다
화면이 그려진 다음, 서버에게 필요한 데이터를 요청하여 받은 후, 화면을 다시그릴때 주로 사용되는데요! 아주 일반적인 패턴이다.
상태(state)에서 tip 키 값에 접근하여 데이터를 꺼내 map 즉, 반복문을 돌리려했습니다. 그런데 state에 데이터가 처음부터 있었나요? 없었죠? useEffect를 거쳐야 state에 데이터가 담기는데 아직 없는 상태라 오류가 나는 겁니다. 처음부터 데이터가 없어서 , 꺼내올수 없는 오류 이런 오류는 우리가 지금 배운 개념들, 상태, 컴포넌트, useEffect를 이용하여 로딩화면을 만들어줌으로써 해결이 가능
네비게이션이란?
앱에 페이지 개념을 입혀주고! 웹 사이트를 이용하듯, 앱에서 여러분들이 만든 컴포넌트들을 페이지화 시켜주고, 해당 페이지끼리 이동을 가능하게 해주는 라이브러리입니다
[링크]https://reactnavigation.org/
React Navigation | React Navigation
Routing and navigation for your React Native apps
reactnavigation.org
yarn add @react-navigation/native설치코드
expo install react-native-screens react-native-safe-area-context react-native-gesture-handler네비게이션 추가 설치 코드
스택 네비게이션이란?
스택 네비게이션은 컴포넌트에 페이지 기능을 부여해주고 컴포넌트에서 컴포넌트로 이동, 즉 페이지 이동을 가능하게 해줍니다
순서대로 쌓고 뒤로가면 역순으로 까지는 시스템이라 생각하면 된다.
컴포넌트를 페이지화 시키는 스택 네비게이션은 다음과 같습니다. 우리가 페이지처럼 만든 컴포넌트를, 정말 페이지처럼 사용할 수 있게끔 페이지로 컴포넌트를 감싸 페이지로 만들어줍니다. 이렇게 만든 여러 페이지들을 책갈피 기능을 하는 스택 네비게이터에 모조리 등록시켜서, 언제든지 이 페이지 이동이 가능하게끔 해줍니다 페이지는 Stack.Screen 이라 부르며 책갈피는 Stack.Navigator라 부릅니다
createStackNavigator 설치 코드
yarn add @react-navigation/stack적용 준비
import React from 'react';
//설치한 스택 네비게이션 라이브러리를 가져옵니다
import { createStackNavigator } from '@react-navigation/stack';
//페이지로 만든 컴포넌트들을 불러옵니다
import DetailPage from '../pages/DetailPage';
import MainPage from '../pages/MainPage';
//스택 네비게이션 라이브러리가 제공해주는 여러 기능이 담겨있는 객체를 사용합니다
//그래서 이렇게 항상 상단에 선언하고 시작하는게 규칙입니다!
const Stack = createStackNavigator();기본 틀
//리액트의 모~든 파일은 컴포넌트라 생각하고
//페이지 기능을 해주는 모든 기능이 담겨 있는 컴포넌트를 만든다 생각하세요!
const StackNavigator = () =>{
return (
/// 페이지 기능이 들어갈 곳
)
}
export default StackNavigator;스크린 옵션
//컴포넌트들을 페이지처럼 여기게끔 해주는 기능을 하는 네비게이터 태그를 선언합니다.
//위에서 선언한 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="MainPage" component={MainPage}/>
<Stack.Screen name="DetailPage" component={DetailPage}/>컴포넌트를 페이지화 했고, 페이지를 이동할 수 있는 네이게이션도 준비가 됐다면, 우리는 최상단 컴포넌트 즉 App.js에 네비게이션 기능을 달아야 합니다. 즉, 앱 가장 최상위 코드에 네비게이션을 다는겁니다
sereenOptions로 옵션을 따르고 있기 때문에 메인페이지의 모습이 조금 어색하다.아래와 같은 코드로 수정하면 된다.
import React from 'react';
//설치한 스택 네비게이션 라이브러리를 가져옵니다
import { createStackNavigator } from '@react-navigation/stack';
//페이지로 만든 컴포넌트들을 불러옵니다
import DetailPage from '../pages/DetailPage';
import MainPage from '../pages/MainPage';
//스택 네비게이션 라이브러리가 제공해주는 여러 기능이 담겨있는 객체를 사용합니다
//그래서 이렇게 항상 상단에 선언하고 시작하는게 규칙입니다!
const Stack = createStackNavigator();
const StackNavigator = () =>{
return (
//컴포넌트들을 페이지처럼 여기게끔 해주는 기능을 하는 네비게이터 태그를 선언합니다.
//위에서 선언한 const Stack = createStackNavigator(); Stack 변수에 들어있는 태그를 꺼내 사용합니다.
//Stack.Navigator 태그 내부엔 페이지(화면)를 스타일링 할 수 있는 다양한 옵션들이 담겨 있습니다.
<Stack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: "white",
borderBottomColor: "white",
shadowColor: "white",
height:100
},
//헤더의 텍스트를 왼쪾에 둘지 가운데에 둘지를 결정
headerTitleAlign:'left',
headerTintColor: "#000",
headerBackTitleVisible: false
}}
>
{/* 컴포넌트를 페이지로 만들어주는 엘리먼트에 끼워 넣습니다. 이 자체로 이제 페이지 기능을 합니다*/}
<Stack.Screen name="MainPage" component={MainPage}/>
<Stack.Screen name="DetailPage" component={DetailPage}/>
</Stack.Navigator>
)
}
export default StackNavigator;navigation.navigate("Detail",{
title: title
})버튼 카드에서 사용한 함수에 아래와 같이 두 번째 인자로 딕셔너리를 넘겨주면, 우리는 이동 한 페이지에서 넘겨준 데이터를 받을 수 있습니다.
Share(expo 사용)
import { Share } from "react-native";Linking(설치코드)
expo install expo-linking사용코드
import * as Linking from 'expo-linking';