[React Native] 파일명, 폴더명, 네이밍 규칙 및 통일

안녕하세요. 이번 포스팅에서는 React Native로 개발하는 프로젝트의 파일명, 폴더명 네이밍 규칙을 알아보겠습니다. 

 

'이렇게 써야만 해!' 라고 법적으로 정의한 것은 아니지만 가독성 높은 코드를 위해서 통일성을 맞춰서 하면 좋을 것 같습니다. 

 

 

1. 파일명 ( index.js 처럼 뒤에 js 확장자가 붙은 JS파일)

파일명은 대문자로 시작합니다. (예시: UserInformation.js)

단, index.js 는 소문자로 시작합니다. 

 

파일명과 exports default의 이름은 동일해야 합니다. 

 

아래처럼 파일의 export가 LogIn이면 파일명도 LogIn.js로 해야합니다.

export default LogIn;

 

또한 다른 곳에서 import 할 때에도 파일명과 동일하게 써야합니다. 

//bad
import logIn from 'LogIn';

//bad
import LogInScreen from 'LogIn';

//good
import LogIn from 'LogIn';

 

 

 

2. 폴더명

폴더 안에 index.js가 있으면 대문자로 시작합니다.

폴더 안에 index.js 없는 폴더라면 소문자로 시작합니다. 

 

이유: 폴더 안에 index.js 파일이 있다면 다른 파일에서 해당 파일을 import 할때 폴더자체를 import하는 것이 좋은 방식입니다.

//bad
import LogIn from 'LogIn/index.js';

//good
import LogIn from 'LogIn';

 

 

그런데 폴더명이 소문자로 시작하면 다른 것들과 통일성이 위배됩니다. 

 

예를들어, 어떤 파일에서 User 라는 폴더에 있는 index.js 파일을 import 한다고 해보겠습니다.

 

폴더명이 소문자라면 

import user from 'user'

로 적어야하기때문에, 다른 import 파일들과의 통일성이 지켜지지 않습니다. 

 

import User from 'User'

라고 적어야 통일성이 지켜집니다. 

 

 

 

이 외에도 다양한 규칙들이 존재합니다. 

 

eslint를 사용하면 더 손쉽게 적용할 수 있습니다. 

 

 

참조

https://doodreamcode.tistory.com/176

https://firejune.com/1795/Airbnb의+React%252FJSX+스타일+가이드 

https://github.com/airbnb/javascript

 

 

---

앱 홍보

RN으로 만든 영단어 앱테크 어플 (출시 후 매일 100명씩 가입 중!)

아이폰>

‎캐시보카 - 돈버는 영단어 앱테크

 

RN로 만든 주식, 코인 물타기 계산기, 수익률 계산기 앱

안드로이드>

아이폰>