[React Native] 초기 설치 및 간단하게 babel.config.js 설정

최초 react-native 설치 후  간단하게 babel.config.js 설정 방법

 

1. react-native 설치

npx react-native init [Project Name]

* Reference : https://reactnative.dev/docs/environment-setup

 

* 설치 완료 후 초기 목록

 

2. babel-plugin-module-resolver 설치 및 babel.config.js 수정

npm install --save-dev babel-plugin-module-resolver

 

# babel.config.js

// before

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
};


// after

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
      },
    ],
  ],
};

 

3. jsconfig.json 파일 생성 및 개인별로 필요한 paths 입력 (참고용으로 아래 6개 생성함)

# jsconfig.json

{
    "compilerOptions": {
      "baseUrl": "./src",
      "experimentalDecorators": true,
    },
    "baseUrl": ".",
    "paths": {
      "assets/*": ["./src/assets"],
      "router/*": ["./src/router"],
      "components/*": ["./src/components"],
      "containers/*": ["./src/containers"],
      "screens/*": ["./src/screens"],
      "utils/*": ["./src/utils"]
    }
  }

 

* 여기까지하면 설정한 paths 로 정상 동작함

* 동작하지 않는 다면 아래 커맨드를 통해, metro caches 를 지우고 다시 실행하면 됨

react-native start --reset-cache

 

 

4. 테스트

 1) src 및 하위 6개 폴더 및 src/router/index.js 파일 생성

 2) App.js 에 있던 기본 소스를  /src/router/index.js 로 이동

 3) App.js 소스 변경 

 

# src/router/index.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

 import React from 'react';
 import type {Node} from 'react';
 import {
   SafeAreaView,
   ScrollView,
   StatusBar,
   StyleSheet,
   Text,
   useColorScheme,
   View,
 } from 'react-native';
 
 import {
   Colors,
   DebugInstructions,
   Header,
   LearnMoreLinks,
   ReloadInstructions,
 } from 'react-native/Libraries/NewAppScreen';
 
 const Section = ({children, title}): Node => {
   const isDarkMode = useColorScheme() === 'dark';
   return (
     <View style={styles.sectionContainer}>
       <Text
         style={[
           styles.sectionTitle,
           {
             color: isDarkMode ? Colors.white : Colors.black,
           },
         ]}>
         {title}
       </Text>
       <Text
         style={[
           styles.sectionDescription,
           {
             color: isDarkMode ? Colors.light : Colors.dark,
           },
         ]}>
         {children}
       </Text>
     </View>
   );
 };
 
 const Root: () => Node = () => {
   const isDarkMode = useColorScheme() === 'dark';
 
   const backgroundStyle = {
     backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
   };
 
   return (
     <SafeAreaView style={backgroundStyle}>
       <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
       <ScrollView
         contentInsetAdjustmentBehavior="automatic"
         style={backgroundStyle}>
         <Header />
         <View
           style={{
             backgroundColor: isDarkMode ? Colors.black : Colors.white,
           }}>
           <Section title="Step One">
             Edit <Text style={styles.highlight}>App.js</Text> to change this
             screen and then come back to see your edits.
           </Section>
           <Section title="See Your Changes">
             <ReloadInstructions />
           </Section>
           <Section title="Debug">
             <DebugInstructions />
           </Section>
           <Section title="Learn More">
             Read the docs to discover what to do next:
           </Section>
           <LearnMoreLinks />
         </View>
       </ScrollView>
     </SafeAreaView>
   );
 };
 
 const styles = StyleSheet.create({
   sectionContainer: {
     marginTop: 32,
     paddingHorizontal: 24,
   },
   sectionTitle: {
     fontSize: 24,
     fontWeight: '600',
   },
   sectionDescription: {
     marginTop: 8,
     fontSize: 18,
     fontWeight: '400',
   },
   highlight: {
     fontWeight: '700',
   },
 });
 
 export default Root;

 

# App.js

import * as React from "react";
import Root from 'router';

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

 

* 정상적으로 잘 동작함