RN에서의console.log
React Native의 console.log는 일반 웹 브라우저나 Node.js보다 훨씬 느리다. 최신 버전에는 New Architecture(JSI, TurboModules)가 기본적으로 매우 안정화되었고 Hermes 엔진이 기본 탑재되어 전반적인 성능이 대폭 향상되었지만, 여전히 console.log는 앱을 심각하게 버벅거리게 만든다. 이는 곧 앱 성능을 심각하게 저하시킬 수 있어서, 프로덕션 빌드에서는 반드시 제거해야 한다. 그렇다면 느린건 알겠고, 왜 느린건가? 정리해보자.
1. 무거운 직렬화 작업과 JS 스레드 블로킹
우리가 무심코 console.log(객체값)을 찍을 때, 자바스크립트 엔진(Hermes)은 그 복잡하고 깊은 객체를 터미널 화면에 텍스트로 보여주기 위해 모든 속성을 순회하며 문자열로 변환(Stringification)해야 한다.
React Native는 단 하나의 JS 스레드에서 UI 렌더링 로직과 비즈니스 로직을 모두 처리한다. 이 거대한 객체를 문자열로 바꾸는 동안 JS 스레드는 완전히 멈춰버리고(Blocking), 그 결과 사용자가 스크롤을 하거나 버튼을 눌러도 앱이 반응하지 않는 프레임 드랍(버벅거림)이 발생한다.
2. 터미널(Metro)과의 외부 통신 비용 (I/O Overhead)
웹 브라우저의 console.log는 브라우저 내부의 개발자 도구로 데이터를 바로 보내면 끝이다.
하지만 React Native 환경에서는 JS 스레드에서 생성된 로그 데이터를 웹소켓(WebSocket)을 통해 컴퓨터에서 돌아가고 있는 Metro Bundler 터미널로 전송하거나, 네이티브(iOS/Android)의 로깅 시스템(Logcat, NSLog)으로 넘겨야 한다. 0.81의 JSI 덕분에 JS와 네이티브 간 통신이 빨라졌다고 해도, 외부 입출력 작업 자체가 본질적으로 느리기에 병목이 발생한다.
3. Hermes 엔진의 설계 목적
현재 RN 0.8~ 버전의 기본 엔진인 Hermes는 '앱의 빠른 시작(TTV)'과 '메모리 절약'에 극도로 최적화되어 있다. 모바일 기기 환경에 맞춰 가볍게 설계되었기 때문에, V8 엔진(크롬 브라우저)처럼 방대한 양의 디버깅 데이터를 빠르게 처리하고 출력하는 데에는 상대적으로 취약하다.
4. 렌더링 사이클마다의 누적 데미지
만약 useCallback이 풀려있거나 리렌더링이 잦은 컴포넌트 내부에 console.log가 있다면?
초당 60프레임(16ms)으로 화면을 그려야 하는데, 렌더링될 때마다 10ms가 걸리는 console.log가 실행된다면 화면은 필연적으로 뚝뚝 끊기게 될 수 있다.
이러한 이유 때문에 실무에서는 "운영(Production) 빌드 시에는 반드시 모든 console.log를 제거한다"가 절대적인 규칙이다. 개발 환경(Debug)에서도 렌더링 주기에 포함된 로그는 성능 측정을 방해하므로 꼭 필요할 때만 찍고 바로 지우는 것이 좋다.
빌드시 자동으로 console.log 를 지우는 방법
실무에서 배포 전 실수로 남겨진 console.log 때문에 앱 성능이 낮아지는 것을 방지하는 방법이다.
Babel 플러그인을 활용하여 운영(Production) 빌드 시에만 자동으로 로그를 지워주는 세팅하는 것을 알아보자.
-
설치
pnpm install babel-plugin-transform-remove-console -D -
babel.config.js설정
프로젝트 최상단에 있는babel.config.js파일을 열어 아래와 같이 수정하자. 개발할 때는 로그가 정상적으로 찍히고, 배포할 때만 플러그인이 작동하도록 env 속성을 사용하는 것이 핵심이다.
module.exports = {
presets: ['module:@react-native/babel-preset'],
env: {
// 운영 환경(Production) 빌드 시에만 아래 플러그인이 작동
production: {
plugins: [
['transform-remove-console', { exclude: ['error', 'warn'] }]
],
},
},
};