Announcing React Native 0.61 with Fast Refresh

React Native 0.61을 발표하게 되어 기쁘게 생각합니다. 이번 버전에는 Fast Refresh라는 새로운 리로딩 기능이 포함되어 있습니다.

빠른 새로고침(Fast Refresh)

리액트 네이티브 커뮤니티에 공통적인 문제점에 대해 물었을 때, 가장 많이 언급된 답변 중 하나는 "핫 리로딩" 기능이 제대로 작동하지 않는다는 것이었다. 이 기능은 함수형 컴포넌트에서 신뢰할 수 없었고, 화면 업데이트가 자주 실패했으며, 오타나 실수에 취약했다. 대부분의 사람들이 이 기능을 비활성화했다는 피드백을 받았다.

리액트 네이티브 0.61에서 기존의 "라이브 리로딩"(저장 시 재로딩)과 "핫 리로딩" 기능을 통합해 "빠른 새로고침(Fast Refresh)"라는 새로운 기능으로 재설계했다. 빠른 새로고침은 다음과 같은 원칙으로 처음부터 구현되었다:

• 빠른 새로고침은 함수형 컴포넌트와 훅을 포함한 모던 리액트를 완벽히 지원한다.
• 빠른 새로고침은 오타나 실수 후에도 원활히 복구하며, 필요한 경우 전체 재로딩으로 대체한다.
• 빠른 새로고침은 코드 변환을 과도하게 수행하지 않아 기본적으로 활성화해도 안정적이다.

빠른 새로고침이 작동하는 모습을 보려면 다음 비디오를 확인해 보자:

한번 사용해 보고 의견을 남겨 주세요! 원한다면 개발자 메뉴(iOS에서는 Cmd+D, 안드로이드에서는 Cmd+M 또는 Ctrl+M)에서 비활성화할 수 있다. 활성화와 비활성화는 즉시 적용되므로 언제든지 가능하다.

빠른 새로고침 사용 시 유용한 팁 몇 가지:

• 빠른 새로고침은 기본적으로 함수형 컴포넌트(와 훅!)의 로컬 상태를 유지한다.
• 매번 수정 시 리액트 상태를 초기화해야 한다면, 해당 컴포넌트 파일에 // @refresh reset 주석을 추가하면 된다.
• 빠른 새로고침은 클래스 컴포넌트를 상태를 유지하지 않고 항상 다시 마운트한다. 이는 안정적인 작동을 보장한다.
• 코드에서 실수를 할 때마다 빠른 새로고침은 파일 저장 후 자동으로 렌더링을 재시도한다. 구문 오류나 런타임 오류를 수정한 후 앱을 수동으로 재로딩할 필요가 없다.
• 수정 중 console.log나 debugger 문을 추가하는 것은 유용한 디버깅 기법이다.

빠른 새로고침 관련 문제가 있다면 GitHub에 보고해 주세요. 검토하겠습니다.

기타 개선 사항

• use_frameworks! CocoaPods 지원 수정. 0.60 버전에서 CocoaPods를 기본적으로 통합하기 위해 몇 가지 업데이트를 진행했다. 하지만 이로 인해 use_frameworks!를 사용하는 빌드가 깨지는 문제가 발생했다. 이 문제는 0.61 버전에서 수정되어, 동적 프레임워크를 사용하는 iOS 프로젝트에 React Native를 더 쉽게 통합할 수 있게 됐다.

• useWindowDimensions Hook 추가. 이 새로운 Hook은 자동으로 화면 크기 업데이트를 제공하고 구독한다. 대부분의 경우 Dimensions API 대신 사용할 수 있다.

• React 16.9로 업그레이드. 이 버전에서는 UNSAFE_ 생명주기 메서드의 구식 이름을 더 이상 사용하지 않도록 변경했고, act 기능이 개선됐다. 자세한 내용과 자동 마이그레이션 스크립트는 React 16.9 블로그 포스트에서 확인할 수 있다.

주요 변경 사항

• React .xcodeproj 제거. 0.60 버전에서 CocoaPods를 통한 자동 링크 기능을 도입했다. 또한 CocoaPods를 e2e 테스트 실행에 통합해, 이제부터는 iOS 앱에 RN을 통합하는 표준 방식으로 사용한다. 이로 인해 React .xcodeproj 지원이 사실상 중단되었으며, 0.61 버전부터 해당 파일이 제거되었다. 참고: 이미 0.60 버전의 자동 링크를 사용 중이라면 이 변경 사항의 영향을 받지 않는다.

감사 인사

0.61 버전을 만드는 데 도움을 주신 모든 기여자분들께 감사드립니다!

업데이트 내용을 확인하려면 0.61 변경 로그를 참고하세요.