[0810] React-Native 강의 정리

Section 11 : Navigation with Parameters

Navigation

: navigate를 통해 패러미터를 전달할 수 있음.

import React from 'react';
import { Text, View, StyleSheet, FlatList, TouchableOpacity } from 'react-native';
import { withNavigation } from 'react-navigation';

const Screen = ({ navigation }) => {
	//navigate로 ContentsShow 로 이동 + 이동하면서 item.id를 전달
    return (
        <View style={styles.container}>
        	<TouchableOpacity							
				onPress={() => navigation.navigate('ContentsShow', { id: item.id }) }>	              <ResultsDetail result={item}/>
			</TouchableOpacity>
        </View>
    );
};

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

//위에서 전달받은 id 값은 navigation.getParam()을 통해 받을 수 있음.
const ContentsShowScreen = ({ navigation }) => {
    const id = navigation.getParam('id');

    return (
        <View>
            <Text>{id}</Text>
        </View>
    );
};

---

Section 12 : Advanced State Management with Context

- Navigator를 감싸는 이유 : 앱 전체의 데이터를 관리할 Provider를 만들기 위해서.

//기존의 App.js의 BoilerPlate
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import Screen from './src/screens/Screen';

const navigator = createStackNavigator({
  Screen: Screen,
}, {
  initialRouteName: 'Screen',
  defaultNavigationOptions: {
    title: 'Blogs',
  },
});

export default createAppContainer(navigator);

//Navigator를 Wrapping
import React from 'react';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import Screen from './src/screens/Screen';

const navigator = createStackNavigator({
  Screen: Screen,
}, {
  initialRouteName: 'Screen',
  defaultNavigationOptions: {
    title: 'Blogs',
  },
});

const App =  createAppContainer(navigator);

export default () => {
	return <App />;
};

 

Context & Prop

- prop : 부모가 바로 아래의 자식에게 정보값을 전달할 수 있음.

→ 구성하기 쉬움.

→ 여러 계층 아래의 자식에게 정보를 전달하기 위해서는 결국 많은 양의 코드를 작성해야 함.

 

- Context : 부모가 여러 계층 아래의(nested) 자식에게 정보를 전달할 때 사용.

→ prop에 비해 구성하기 어려움.

→ 그런 prop에 비해 여러 계층 아래의 자식과 데이터를 주고 받기에는 쉬움!

 

 

Context

import React, { createContext } from 'react';

const Context = React.createContext();

export const Provider = ({ children }) => {
    return <Context.Provider>
        {children}
    <BlogContext.Provider>;
};

 

- children

const App = () => {
	return <CustomComponent>
		<Text>Hello World!</Text>
	</CustomComponent>;
};

→ 위와 같은 코드 상에서, App은 CustomComponent에게 children이라는 prop을 전달함.

→ children : <Text>Hello World!</Text>

 

⇒ 만든 context를 앱 전체에서 사용하기 위해, 모든 screen들을 관리하는 navigator를 context로 감쌈.

import React from 'react';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import IndexScreen from './src/screens/IndexScreen';
import { Provider } from './src/context/Context';

const navigator = createStackNavigator({
  Index: IndexScreen,
}, {
  initialRouteName: 'Index',
  defaultNavigationOptions: {
    title: 'Blogs',
  },
});

const App = createAppContainer(navigator);

export default () => {
  return (<Provider>
      <App />
    </Provider>);
};

 

- Provider : context를 구독하는 컴포넌트들에게 context의 변화를 알리는 역할을 수행.

(참고 : https://ko.reactjs.org/docs/context.html)

→ value : 자식 컴포넌트에게 공유하고자 하는 정보.

 

- useContext : Context에 접근, 값(value)을 받아오는 함수.

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

const IndexScreen = () => {
    const value = useContext(Context);

    return (
        <View>
            <Text>Index Screen</Text>
            <Text>{value}</Text>
        </View>
    );
};

const styles = StyleSheet.create({});

export default IndexScreen;