React Native 프로젝트 폴더 구조 셋팅 & 절대 경로 설정 & 정적파일(이미지) 경로 설정

* 예시 프로젝트는 React Native CLI로 만들어진 프로젝트임을 참고 바랍니다.

React Native 개발 환경 설정은 공식 문서를 참고하세요.

Setting up the development environment · React Native

React Native 프로젝트 폴더 구조 셋팅

react-native init 명령어로 프로젝트를 시작하면 아래와 같은 폴더 구조를 기본으로 셋팅해준다.

해당 프로젝트 루트에 components 폴더와 assets 폴더를 구성할 수도 있지만 app과 관련된 것들을 app 폴더에서 관리해주기 위해 아래와 같이 폴더 구조를 셋업했다.

app 폴더 하위로 App.js 파일을 옮기고, App.js 파일과 같은 위치에 assets, components, screens, utils 와 같은 폴더를 구성했다. 그리고 assets 폴더 하위로 fonts와 images 폴더를 두었다.

정적파일(이미지) 경로 설정

이미지 파일이나 폰트 파일과 같이 정적 파일을 상대 경로로 import 하지 않기 위해 각 폴더 하위에 package.json 파일을 생성하고, 아래와 같이 작성했다.

{
  "name":"images",
  "version":"0.0.1"
}

{
  "name":"assets",
  "version":"0.0.1"
}

이렇게 만들어두면 아래와 같이 정적파일 경로를 불러올 수 있다.

<Image
	style={styles.backgroundImage}
	source={require('images/image02.jpg')}
/>

import 시 절대 경로 설정하기

- babel-plugin-module-resolver 설치하기

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

- babel.config.js 에서 alias 설정하기

babel.config.js 파일을 아래와 같이 수정한다.

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
        extensions: [
          '.ios.ts',
          '.android.ts',
          '.ts',
          '.ios.tsx',
          '.android.tsx',
          '.tsx',
          '.jsx',
          '.js',
          '.json',
        ],
        alias: {
          '@': './src',
          '@components': './src/components',
          '@screens': './src/screens',
          '@assets': './src/assets',
        },
      },
    ],
  ],
};

- tsconfig.json 파일 수정

TypeScript를 사용 중이라면, tsconfig.json 파일도 아래와 같이 수정해주어야 에러를 막을 수 있다.

{
  "extends": "@tsconfig/react-native/tsconfig.json",     /* Recommended React Native TSConfig base */
  "compilerOptions": {
    ..., // 다른 옵션들...
    "baseUrl": "./src",
    "paths": {
      "@/*": ["./*"],
      "@components/*": ["components/*"],
      "@screens/*": ["screens/*"],
      "@assets/*": ["assets/*"],
    }                                /* Skip type checking all .d.ts files. */
  }
}