본문으로 건너뛰기

React-Native 개발할 때 알면 좋은 팁

개요​

RN 플랫폼을 통해 모바일 앱을 개발할 때 잊어버리기 쉬운 좋은 팁이 여럿 있습니다.

한 포스트로 쓰기에는 사소하지만 까먹을 때마다 보기 좋은 팁들을 모아봤습니다.

제 블로그를 찾아주신 다른 분들에게도 도움이 되었으면 좋겠습니다.

일반적인 팁​

서드파티 라이브러리 사용을 최대한 지양하세요.​

그 중 제대로 관리되는 라이브러리는 소수입니다. 나중에 의존성 지옥에 갇히게 됩니다.

가벼운 라이브러리는 컴포넌트로 스스로 구현하는 것이 좋습니다.

하나라도 의존성에서 벗어나게 하세요. 지금 제공되는 기본 컴포넌트로도 충분합니다.

Button 컴포넌트 사용을 지양하세요.​

Button컴포넌트는 기능이 정말 빈약합니다.

모든 텍스트나 뷰 색상을 지정해 주세요.​

IOS 텍스트 컬러 기본 값과 Android 텍스트 컬러 기본 값이 다릅니다. 컬러 코드로 색상을 지정해 주세요.

크로스 플랫폼의 가장 큰 장점이 하나의 코드로 모든 기기에 똑같이 보이게 할 수 있기 때문 아닌가요?

글자가 튀어나와요​

부모 컴포넌트 스타일 속성에 아래 코드를 추가해 주세요.

flexShrink: 1;

React-Navigation 다른 스크린으로 이동 시 인자 전달​

먼저 컴포넌트에 다음과 같이 navigation 인자를 받습니다.

const OriginView = ({navigation}) => {
    return ...
}

다른 스크린으로 이동 이벤트 내에 다음과 같이 명시해줍니다.

navigation.navigate("ScreenName", { name: "banana" });

이동한 스크린 컴포넌트에서 인자를 활용하려면 다음과 같이 작성합니다.

const ScreenName = ({ route, navigation }) => {
  const { name } = route.params;
  console.log(name)// banana
  return ...
};

정중앙에 자식 컴포넌트 위치시키기​

justifyContent와 alignItems를 부모 컴포넌트 스타일 속성에 명시합니다.

<View
  style={{
    justifyContent: "center",
    alignItems: "center",
  }}
>
  <Text>horizental & vertical center</Text>
</View>

빌드 시 :app:installDebug 단계에서 진행되지 않는 경우​

adb 서버를 재시작합니다.

adb kill-server
adb start-server

빌드 캐시 지우기​

일시적인 빌드 오류가 꽤 자주 발생합니다. 이때 한번씩 해주면 됩니다.

cd android
./gradlew clean
rm -rf ~/.gradle/caches/

Execution failed for task ':app:mergeDexDebug'​

빌드 시 발생할 수 있는 오류입니다. ./gradlew assembleRelease를 통해 빌드할 때 발생했습니다.

android/app/build.gradle파일을 열어 다음과 같이 두 줄을 추가해줍니다.

  android {
        defaultConfig {
            ...
            multiDexEnabled true
            ...
        }
        ...
    }

    dependencies {
      implementation 'com.android.support:multidex:1.0.3'
    }

애플리케이션 버전 정보 설정​

play store에 새로운 버전을 출시하기 위해선 ./gradlew bundleRelease 전에 android > app > build.gradle 에서 버전 코드를 수정해야 합니다.

android {
    ...
    defaultConfig {
        ...
        versionCode 2
        versionName "1.1"
    }

}

앱 엑세스 계정 등록하기​

google play console 접속 > 정책 > 앱 콘텐츠 > 앱 엑세스 권한 (관리)

googleplay

빌드 파일 지우기​

Command + Shift + K

fatal error : YogaKit.modulemap' not found​

yogakit

xcodeproj 파일이 아닌 xcworkspace 파일에 들어가 빌드를 다시 해봅니다. xcodeproj 파일에서 RN 기반 어플리케이션을 빌드할 때 발생하는 문제입니다.

빌드 시 PhaseScriptExecution 에러​

The following build commands failed:
    PhaseScriptExecution [CP-User]\ Generate\ Specs /Users/taegyeonglee/Library/Developer/Xcode/DerivedData/Checked-dweldbcwquxwlsknliekndlc/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/FBReactNativeSpec.build/Script-34C70EFSED90A5EIL023AEB404F232A.sh (in target 'FBReactNativeSpec' from project 'Pods')
(1 failure)

arm64 Mac 개발 환경에서 발생할 수 있는 문제인데 nvm가 기타 다른 모듈과 다른 아키텍처용으로 설치되어 있는 경우 발생할 수 있습니다.

아래 명령을 통해 nvm을 제거해 주세요. (nvm을 사용하지 않는 경우 해당)

brew uninstall nvm

inspector 사용​

control + command + z 후 show inspector 선택

사용 시 시물레이터 내 가상 키보드가 비활성화 되는 점 참고해주세요.

앱 아이콘 만들기​

Android 앱 아이콘을 생성할 땐 기본 아이콘 이름 ic_launcher / 라운드 아이콘 이름 ic_launcher_round으로 다운받아 둘 다 적용해주는 게 좋습니다.

배포 스크린샷 만들기​

목업 제작 사이트​

버전 업그레이드 도우미​

방치한 프로젝트를 업데이트하려 할 때 정말 많은 것들을 수정해야 할 수도 있습니다.

참고 자료​