React Native에서 new Date()가 iOS와 Android에서 다르게 동작하는 이유

React Native로 앱을 개발하면서 날짜와 시간을 다루다 보면 플랫폼마다 미묘하게 다른 동작을 경험하는 경우가 있죠😢
특히 new Date() 생성자에 문자열을 넘길 때 iOS와 Android에서 서로 다른 시간을 출력하는 문제를 겪게 되는데요.

이번 포스팅에서는 이 문제의 원인과 해결 방법에 대해 정리해보겠습니다.

🔍 문제 상황

↪️ 다음 코드를 실행

const testDate = new Date('2025-06-12T02:25:00');
console.log(Platform.OS, ':', testDate);

↪️ 출력 결과

LOG ios : 2025-06-11T17:25:00.000Z
LOG android : 2025-06-12T02:25:00.000Z

같은 코드인데도 불구하고 iOS에서는 시간이 9시간 빠르게 출력돼요.
왜 이런 일이 발생할까요?

🤔 원인 분석

📌 핵심 원인: 문자열 날짜 파싱 방식의 차이

JavaScript의 Date 객체는 ISO 8601 형식의 문자열('YYYY-MM-DDTHH:mm:ss')을 해석할 수 있는데, 문제는 Z(UTC를 의미하는 제트 표시)가 없는 경우 플랫폼마다 해석이 다르다는 것!

🔄 iOS (React Native)

• '2025-06-12T02:25:00'를 로컬 시간(Local Time) 으로 해석

• 한국(KST, +09:00)이라면, 이 시간을 UTC로 변환 → 2025-06-11T17:25:00.000Z로 출력

⚙️ Android (React Native)

• 동일한 문자열을 UTC 시간으로 해석

• 따라서 입력 그대로 2025-06-12T02:25:00.000Z 출력

즉, new Date('2025-06-12T02:25:00')은
iOS에서는 로컬 시간,
Android에서는 UTC 시간으로 해석됨

💡 해결 방법

✅ 1. UTC 시간 명시적으로 쓰기

const utcDate = new Date('2025-06-12T02:25:00Z'); // Z = UTC

• 모든 플랫폼에서 UTC 시간으로 통일됨
   

✅ 2. 로컬 시간 명시적으로 만들기

const localDate = new Date(2025, 5, 12, 2, 25, 0); // 월은 0부터 시작 (5 = 6월)

• 명확하게 로컬 시간으로 생성

• iOS, Android 모두 같은 로컬 시간 해석

📋 정리

🛠 팁: 날짜 라이브러리 dayjs

매번 포맷 신경 쓰는 게 귀찮다면, dayjs, date-fns, moment 같은 날짜 라이브러리를 쓰는 것도 좋아요. 날짜 계산, 포맷, 시간대 처리 등을 훨씬 쉽게 해줘요.

yarn add dayjs

import dayjs from 'dayjs';

const date = dayjs('2025-06-12T02:25:00').toDate();

✅ 마무리

React Native에서 new Date()를 쓸 때는 문자열로 날짜를 만들면 플랫폼마다 다르게 나올 수 있다는 걸 꼭 기억하세요.

안전하게 날짜를 다루려면:

• ✅ UTC 시간은 'Z' 붙이기 (2025-06-12T02:25:00Z)

• ✅ 로컬 시간은 숫자 포맷 쓰기 (new Date(2025, 5, 12, 2, 25))

• ✅ 헷갈리면 dayjs 같은 라이브러리 사용하기

날짜 버그는 진짜 찾기 어려우니까, 처음부터 조심하는 게 최고예요! 🙌