[RN] study 7week / 다이어리 앱 만들기 ①-①

React Navtive 스터디 7week

도서: [리액트 네이티브를 다루는 기술 / 김민준 / 길벗]

(6장 다이어리 앱 만들기 ①-①)

 

6.1 프로젝트 준비하기

6.2 Context API 사용하기

6.3 새 글 작성하기

6.4 글 목록 보여주기

6.5 Animated로 애니매이션 적용하기

6.6 정리

---

6.1 프로젝트 준비하기

스택 내비게이터, 하단 탭 내비게이터 라이브러리 설치, 아이콘 라이브러리 설치

npx react-native init DayLog
cd DayLog
yarn add @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs react-native-screens react-native-safe-area-context react-native-vector-icons
npx pod-install

ios 디렉터리로 들어가서 pod install 명령어 실행 번거로우니까, 루트 디렉터리에 Pod 설치. 

 

6.1.1 react-native-vector-icons 적용하기

ios/DayLog/Info.plist 에 아래 코드 추가

<key>UIAppFonts</key>
	<array>
		<string>MaterialIcons.ttf</string>
	</array>

android/app/build.gradle - 최하단에 아래 코드 추가

project.ext.vectoricons = [
    iconFontNames: [ 'MaterialIcons.ttf' ]
]

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

6.1.2 react-navigation 적용하기

 

DayLog 프로젝트의 화면 구성

RootStack은 네이티브 스택 내비게이션 

MainTab은 하단 탭 내비게이션

 

FeedsScreen : 작성한 글을 목록 형태로 보여주는 화면

CalendarScreen : 달력 형태로 글을 조회하는 화면 

SearchScreen : 글을 검색할 수 있는 화면

WriteScreen: 글을 작성하거나 수정하는 화면(MainTab에 넣지 않고 RootStack에 넣어서 이 화면이 나타날 때는 하단 탭이 나타나지 않도록 설정)

 

프로젝트 디렉터리에 screens 디렉터리를 만들고 화면들을 준비!

 

 

 

네이티브 스택 내비게이터에 MainTab 화면 설정할 때 headerShown 값을 false로 설정. 이렇게 하지 않으면 헤더 두 개 중첩되어 나타남.

//screens/RootStack.tsx

import {createNativeStackNavigator} from '@react-navigation/native-stack';
import React from 'react';
import MainTab from './MainTab';
import WriteScreen from './WriteScreen';

const Stack = createNativeStackNavigator();
function RootStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="MainTab"
        component={MainTab}
        options={{headerShown: false}}
      />
      <Stack.Screen name="Write" component={WriteScreen} />
    </Stack.Navigator>
  );
}

export default RootStack;

---

6.2 Context API 사용하기

Context API  - 리액트에 내장된 기능으로 Props를 사용하지 않아도 특정 값이 필요한 컴포넌트끼리 쉽게 값을 공유할 수 있게 해준다. 주로 프로젝트에서 전역 상태를 관리할 때 많이 사용. 

 

새로운 Context 만들 때, createContext 함수 사용.

import {createContext} from 'react';

APP 컴포넌트에 -Context.Provider로 감싸고,

그 아래 컴포넌트에서 Consumer로 사용 가능

//contexts/LogContext.tsx

import {createContext} from 'react';

const LogContext = createContext('Hello');

export default LogContext;

//App.tsx

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import RootStack from './screens/RootStack';
import LogContext from './ contexts/LogContext';

function App() {
  return (
    <NavigationContainer>
      <LogContext.Provider value="안녕">
        <RootStack />
      </LogContext.Provider>
    </NavigationContainer>
  );
}

export default App;

//screens/FeedsScreen.tsx

import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
import LogContext from '../ contexts/LogContext';

function FeedsScreen() {
  return (
    <View style={styles.block}>
      <LogContext.Consumer>{value => <Text>{value}</Text>}</LogContext.Consumer>
    </View>
  );
}

const styles = StyleSheet.create({
  block: {},
});

export default FeedsScreen;

컴포넌트 태그 사이에 함수를 넣었는데, 이는 Render Props라는 패턴. 

 

6.2.1 children Props

Render Props를 사용하면 우리가 사용할 컴포넌트에서 특정 값을 밖으로 빼내와 사용할 수가 있다.

//screens/FeedsScreen.tsx

import React from 'react';
import {StyleSheet, Text, View} from 'react-native';

type BoxProps = {
  children(text: string): JSX.Element;
};

function FeedsScreen() {
  return (
    <View style={styles.block}>
      <Box>{value => <Text>{value}</Text>}</Box>
    </View>
  );
}

function Box({children}: BoxProps) {
  return <View style={styles.box}>{children('Hello World')}</View>;
}

const styles = StyleSheet.create({
  block: {},
  box: {
    borderWidth: 2,
    padding: 16,
    marginBottom: 16,
  },
});

export default FeedsScreen;

6.2.2 useContext Hook 함수

Render Props는 리액트에 Hooks 없던 시절 유용. 요즘은 사용할 일이 거의 없다. useContext 사용하면 훨씬 간결하게 사용할 수 있음.

useContext Hook을 사용하는 경우, 컴포넌트에서 JSX를 반환하기 전에 값을 조회할 수 있기 때문에 컴포넌트 작성이 더욱 편하다.

 

6.2.3 Context에서 유동적인 값 다루기

Provider를 사용하는 컴포넌트에서 Context의 상태를 관리하는 것보다는 Provider 전용 컴포넌트를 따로 만드는 것이 유지보수성이 더 높다.