Written by react-style
on 2021-12-31

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

@ 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를 사용하지 않아도 특정 값이 필요한 컴포넌트끼리 쉽게 값을 공유할 수 있게 함

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

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

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

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

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

- 현재는 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 ( {/* */} {/* */} ); } 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 ( {/* {value => {value}} */} {/* 1 2 3 */} {/* {value => {value}} */} {/* {value} */} ); } // function Box({children}) { // return {children('Hello World')}; // } 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 ( text: {text} ); } 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 ; } const styles = StyleSheet.create({ block: {}, }); export default SearchScreen;

# screens > WriteScreen.js

import React from 'react'; import {StyleSheet} from 'react-native'; function WriteScreen() { return ; } 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 ( ( ), }} /> ( ), }} /> ( ), }} /> ); } 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 ( ); } 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 ( {children} ); } export default LogContext;

이전 이전 01234 ios / android - 기본 화면 설정

이전 이전 012 ios / android - useContext Hook 테스트

반응형

from http://bocoder.tistory.com/68 by ccl(A) rewrite - 2021-12-31 20:27:41

Top