React Native 개발 프로젝트 생성

 

React Native 프로젝트 생성 준비

 

 

1. 리액트 네이티브 CLI 명령어 사용하여 프로젝트 생성

react-native init Test



2. 타입스크립트, Styled Components, babel-plugin-root-import 를 개발의 편의를 위해 설치

cd Test
npm install --save styled-components
npm install --save-dev typescript @types/react @types/react-native @types/styled-components babel-plugin-root-import



3. 타입스크립트 설정을 위해 tsconfig.json 생성

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react",
    "lib": ["es6"],
    "moduleResolution": "node",
    "noEmit": true,
    "strict": true,
    "target": "esnext",
    "baseUrl": "./src",
    "paths": {
      "~/*": ["*"]
    }
  },
  "exclude": [
    "node_modules",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js"
  ]
}


4. 절대경로로 컴포넌트를 추가하기 위해 babel.config.js 파일 수정

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

아래와 같이 수정


module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'babel-plugin-root-import',
      {
        rootPathPrefix: '~',
        rootPathSuffix: 'src',
      },
    ],
  ],
};


5. App.js 파일을 App.tsx 로 이름을 변경한 후 src 폴더로 이동
   src 폴더가 없을 경우 src 폴더 생성



6. 타입스크립트와 Styled Components를 사용하여 App.tsx 를 수정

import Styled from 'styled-components/native';



7. index.js 파일 수정

import App from './App';

아래와 같이 수정

import App from '~/App';



이제 개발 환경이 갖추어졌으며 본격적인 앱 개발 시작~~