인턴/ 폴더 구조, react navigation

인턴 둘째 주 주말이다.
하루하루가 정신 없어 어떻게 지나갔는지 모르겠다.
낯설었던 react native, 폴더구조와 새로 적용해 본 기능들을 정리해보자.

---

이곳에서 사용했던 폴더 구조=> Module / Navigator => Screen => index => View

Module.tsx

=> 자주 사용되는 기능, UI를 module.tsx 로 뽑아 필요한 곳에서 import하여 적용.
페이지마다 스타일이 다를 수 있어 props를 자주 사용.
실제로 모듈을 가져오는 곳에서는 모듈을 감싸는 Wrapper를 만들어 한번 더 감싸서 사용.

• module에서 페이지 이동이 필요할 경우

import {useNavigation} from '@react-navigation/native';

const navigation = useNavigation();

return(
<Test
  onPress={()=>{
    navigation.navigate('ABCScreen')
    }}
  )

Navigator.tsx

여기서 stack 작업이 이루어져야 페이지 이동이 가능한 듯 하다.
screen.tsx로 이동하기 위한 작업.

import {createStackNavigator} from '@react-nagivation/stack'
import MainScreen from '../screen/MainScreen'
import ABCScreen from './screen/ABCScreen'

const Stack = createStsckNavigator();

const MainNavigator = () => {
	<Stack.Navigator initialRouteName='MainScreen' header='none'>
    	// initialRouteName은 해당 페이지의 첫 화면. 얘로 전체를 감싸는 듯. 여기서는 MainScreen이 첫 화면.
            <Stack.Screen
              name="MainScreen" component={MainScreen} />
            <Stack.Screen
              name="ABCScreen" component={ABCScreen} />
    	</Stack.Navigator>
}

splashNavigator.tsx
=>각 페이지의 컨텍스트와 스크린 임포트
추가 작성 예정

Screen.tsx

여기서 index페이지로 이동 시키는 듯.

import {ABC} from './components/ABC'

function ABCScreen(){
	return <ABC />
}

ABC.tsx

여기서 View파일을 리턴.

*참고! context를 사용해야 할 경우 여기서 ContextProvider로 전체를 감싸야 함!!

import {ABCView} from './Views/ABCView'
import {MainContextProvider} from './hooks/Main.Context'

export const ABC = () => {
	return (
    <MainContextProvider>
        <ABCView />
    </MainContextProvider>
    )
}

ABCView.tsx

마지막으로 View가 화면에 보여짐.