[React Native] 각종 Clean & 캐시 삭제 및 라이브러리 설치 방법

 

리액트 네이티브로 앱을 개발하다 보면 빌드 오류나 시뮬레이터 기동 시 캐시 문제, 의존성 문제 등으로 인해 예상치 못한 에러가 발생하는 경우가 있습니다. 이런 경우, 클린 작업이나 캐시 삭제를 통해 문제를 해결할 수 있습니다.

이번 포스트에서는 리액트 네이티브 개발 중 자주 사용하게 되는 Clean, 캐시 삭제 명령어와 기본적인 라이브러리 설치 방법을 정리해 봅니다.

 

Clean & 캐시 삭제

안드로이드(Gradle) Clean

안드로이드 빌드 관련 문제 해결을 위해, 다음 명령어로 Gradle 캐시와 빌드 아티팩트를 초기화할 수 있습니다.

# 프로젝트 루트에서 android 폴더로 이동 후 실행
cd android/ && ./gradlew clean build --refresh-dependencies
cd ../
npm run android

 

또는, 단순히 안드로이드 Gradle 초기화가 필요하다면:

cd android/ && ./gradlew clean

 

iOS Clean

iOS 개발 시 Xcode에서 Clean을 수행하는 방법은 두 가지가 있습니다.

1. Xcode 내에서:
   • 메뉴에서 Product > Clean Build Folder 또는 Command + Shift + K를 사용
   • Info.plist 저장 후 Clean을 진행
2. 터미널에서 DerivedData 삭제:

rm -rf ~/Library/Developer/Xcode/DerivedData

 

 

위 명령어는 Xcode 빌드 시 생성되는 캐시 데이터를 모두 삭제합니다. 삭제 후 Xcode에서 다시 Command + B로 빌드를 진행하세요.

 

Metro Server 캐시 삭제

리액트 네이티브의 번들러인 Metro Server 캐시를 삭제하려면 아래 명령어를 사용합니다.

npm cache clean --force
npm start --reset-cache

 

혹은, 리액트 네이티브 실행 시 바로 캐시 초기화 옵션을 추가하여 시작할 수 있습니다.

react-native start --reset-cache

 

 

리액트 네이티브 라이브러리 설치

프로젝트에 필요한 주요 라이브러리들의 설치 방법을 정리해 봅니다.

 

• React Navigation Core:
  화면 이동에 필요한 기본 라이브러리

npm install @react-navigation/native

 

• React Native Screens & Safe Area Context:
  화면 전환 및 안전 영역 관리를 위한 라이브러리

npm install react-native-screens react-native-safe-area-context

• React Native Gesture Handler:
  제스처 핸들링을 위한 필수 라이브러리

npm install --save react-native-gesture-handler

• Stack Navigator:
  화면 전환 방식을 스택 기반으로 사용하려면

npm install react-navigation-stack

애니메이션

• React Native Reanimated:
  부드러운 애니메이션 구현을 위한 라이브러리

npm install react-native-reanimated

아이콘

• React Native Vector Icons:
  다양한 아이콘을 사용하기 위해

npm install --save react-native-vector-icons

이미지 피커 (카메라 및 앨범 접근)

• React Native Image Picker:
  사진 및 비디오 선택 기능을 위해

npm install --save react-native-image-picker

 

 

 

끝