[리액트 네이티브를 다루는 기술 #9] 6장 다이어리 앱 만들기1 (p.285 ~ 305)

@ List

* 6.1 프로젝트 준비하기

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

** 6.1.2 react-navigation 적용하기

* 6.2 Context API 사용하기

** 6.2.1 children Props

** 6.2.2 useContext Hook 함수

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

 

@ Note

1. Context API 전역 상태 관리

 - Props를 사용하지 않아도 특정 값이 필요한 컴포넌트끼리 쉽게 값을 공유할 수 있게 함

  > reference : https://ko.reactjs.org/docs/context.html#reactcreatecontext

 - 현재는 잘 사용하지 않는 방법

  > LogContext.Provider : value 라는 Props를 설정 가능

  > LogContext.Consumer : 설정한 value 값을 사용 가능

  > children Props 는 태그 사이에 넣어준 값

  > Render Props는 children의 타입을 함수 형태로 받아오는 패턴

- 현재는 useContext Hook 함수 사용함

 

@ Result

01234

ios / android - 기본 화면 설정

 

012

ios / android - useContext Hook 테스트

 

# App.js

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

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

export default App;

 

# screens > FeedsScreen.js

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

function FeedsScreen() {
  // const value = useContext(LogContext);

  const {text, setText} = useContext(LogContext);

  return (
    <View style={styles.block}>
      {/* <LogContext.Consumer>{value => <Text>{value}</Text>}</LogContext.Consumer> */}

      {/* <Box>
        <Text>1</Text>
      </Box>
      <Box>
        <Text>2</Text>
      </Box>
      <Box>
        <Text>3</Text>
      </Box> */}

      {/* <Box>{value => <Text>{value}</Text>}</Box> */}

      {/* <Text>{value}</Text> */}

      <TextInput
        value={text}
        onChangeText={setText}
        placeholder="텍스트를 입력하세요."
        style={styles.input}
      />
    </View>
  );
}

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

const styles = StyleSheet.create({
  // box: {
  //   borderWidth: 2,
  //   padding: 16,
  //   borderBottomColor: 'black',
  //   marginBottom: 16,
  // },

  input: {
    padding: 16,
    backgroundColor: 'white',
  },
});

export default FeedsScreen;

 

# screens > CalendarScreen.js

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

function CalendarScreen() {
  const {text} = useContext(LogContext);
  return (
    <View style={styles.block}>
      <Text style={styles.text}>text: {text}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  block: {},
  text: {
    padding: 16,
    fontSize: 24,
  },
});

export default CalendarScreen;

 

# screens > SearchScreen.js

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

function SearchScreen() {
  return <View style={styles.block} />;
}

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

export default SearchScreen;

 

# screens > WriteScreen.js

import React from 'react';
import {StyleSheet} from 'react-native';

function WriteScreen() {
  return <View style={styles.block} />;
}

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

export default WriteScreen;

 

# screens > MainTab.js

import React from 'react';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import FeedsScreen from './FeedsScreen';
import CalendarScreen from './CalendarScreen';
import SearchScreen from './SearchScreen';
import Icon from 'react-native-vector-icons/MaterialIcons';

const Tab = createBottomTabNavigator();

function MainTab() {
  return (
    <Tab.Navigator
      screenOptions={{
        tabBarShowLabel: false,
        activeTintColor: '#009688',
      }}>
      <Tab.Screen
        name="Feeds"
        component={FeedsScreen}
        options={{
          tabBarIcon: ({color, size}) => (
            <Icon name="view-stream" size={size} color={color} />
          ),
        }}
      />
      <Tab.Screen
        name="Calendar"
        component={CalendarScreen}
        options={{
          tabBarIcon: ({color, size}) => (
            <Icon name="event" size={size} color={color} />
          ),
        }}
      />
      <Tab.Screen
        name="Search"
        component={SearchScreen}
        options={{
          tabBarIcon: ({color, size}) => (
            <Icon name="search" size={size} color={color} />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

export default MainTab;

 

# screens > RootStack.js

import React from 'react';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
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;

 

# contexts > LogContext.js

import React from 'react';
import {createContext, useState} from 'react';

// const LogContext = createContext('안녕하세요.');

const LogContext = createContext();

export function LogContextProvider({children}) {
  const [text, setText] = useState('');
  return (
    <LogContext.Provider value={{text, setText}}>
      {children}
    </LogContext.Provider>
  );
}

export default LogContext;