본문 바로가기
FrontEnd

React Native 0.72 변경점

by Fathory 2023. 7. 14.



React Native 0.72는 2023년 6월 21일에 출시되었습니다. 여기에는 다음과 같은 여러 가지 새로운 기능과 개선 사항이 포함되어 있습니다. 

요약

TurboModules: TurboModules는 React Native용 네이티브 모듈을 작성하는 새로운 방법입니다. 기존 네이티브 모듈보다 더 효율적이고 사용하기 쉽습니다.

 

iOS용 런타임 연결 지원: 런타임 연결을 사용하면 React Native 앱이 런타임에 타사 라이브러리에 동적으로 연결할 수 있습니다. 이렇게 하면 전체 앱을 다시 빌드하지 않고도 앱에 새 기능을 더 쉽게 추가할 수 있습니다.


Symlink 지원: Symlink 지원을 통해 React Native가 monorepo 설정 및 pnpm과 투명하게 작동할 수 있습니다. 이렇게 하면 해결 방법이 필요하지 않습니다.

 

개선된 오류 처리: React Native 0.72에는 오류 처리에 대한 여러 가지 개선 사항이 포함되어 있습니다. 이렇게 하면 앱을 더 쉽게 디버그하고 오류의 원인을 식별할 수 있습니다.

 

새로운 디버깅 도구: React Native 0.72에는 새로운 디버거와 새로운 성능 프로파일러를 비롯한 여러 가지 새로운 디버깅 도구가 포함되어 있습니다. 이러한 도구는 앱의 성능 문제를 찾아 수정하는 데 도움이 될 수 있습니다.

 

 

내용 

터보 모듈
TurboModules는 React Native용 네이티브 모듈을 작성하는 새로운 방법입니다. 기존 네이티브 모듈보다 더 효율적이고 사용하기 쉽습니다. 

TurboModules는 JavaScript로 작성되었지만 네이티브 코드를 호출할 수 있습니다. 또한 기존 네이티브 모듈보다 더 모듈화되어 재사용하기가 더 쉽습니다. 

TurboModule을 사용하려면 TurboModule.js라는 프로젝트에 새 파일을 만들어야 합니다. 이 파일에는 TurboModule용 코드가 포함됩니다. 그런 다음 TurboModule을 React Native 앱으로 가져올 수 있습니다. 

 

다음은 TurboModule의 예입니다. 

보다시피 TurboModule은 일반 React Native 구성 요소와 매우 유사합니다. 이름 속성이 있고 메서드를 내보낼 수 있습니다. 주요 차이점은 TurboModules가 네이티브 코드를 호출할 수 있다는 것입니다. 

 

iOS용 런타임 연결 지원
런타임 연결은 React Native 앱이 런타임에 타사 라이브러리에 동적으로 연결할 수 있도록 하는 React Native 0.72의 새로운 기능입니다. 이렇게 하면 전체 앱을 다시 빌드하지 않고도 앱에 새 기능을 더 쉽게 추가할 수 있습니다. 

런타임 연결을 사용하려면 app.json이라는 프로젝트에 새 파일을 추가해야 합니다. 이 파일에는 연결하려는 타사 라이브러리 목록이 포함됩니다. 

다음은 app.json 파일의 예입니다.

 보시다시피 runtimeLinking 속성에는 연결하려는 라이브러리 목록이 포함되어 있습니다. 타사 라이브러리의 설명서에서 필요한 라이브러리 목록을 얻을 수 있습니다. app.json 파일을 추가했으면 다음 명령을 실행하여 라이브러리를 연결할 수 있습니다. 

“react-native link” 

이 명령은 라이브러리를 다운로드하고 앱에 연결합니다. 

 

심볼릭 링크 지원

 

Symlink 지원은 React Native가 monorepo 설정 및 pnpm과 투명하게 작동할 수 있도록 하는 React Native 0.72의 새로운 기능입니다. 이렇게 하면 해결 방법이 필요하지 않습니다.

Symlink 지원을 사용하려면 프로젝트에 .gitignore라는 새 파일을 추가해야 합니다. 이 파일에는 git 저장소에서 추적하지 않으려는 파일 목록이 포함됩니다. 

다음은 .gitignore 파일의 예입니다. 

보시다시피 .gitignore 파일에는 git 저장소에서 추적하지 않으려는 파일 목록이 포함되어 있습니다. 여기에는 앱이 의존하는 모든 타사 라이브러리가 포함된 node_modules 디렉터리가 포함됩니다. 

.gitignore 파일을 추가했으면 다음 명령을 실행하여 node_modules 디렉터리를 symlink로 연결할 수 있습니다. 

“react-native link” 

 

향상된 오류 처리
React Native 0.72에는 오류 처리에 대한 여러 가지 개선 사항이 포함되어 있습니다. 이러한 개선 사항을 통해 앱을 더 쉽게 디버그하고 오류의 원인을 식별할 수 있습니다. 

가장 중요한 개선 사항 중 하나는 React Native가 이제 더 자세한 오류 메시지를 제공한다는 것입니다. 여기에는 오류가 발생한 코드 줄, 스택 추적 및 오류 유형에 대한 정보가 포함됩니다. 이 정보는 앱을 디버깅하는 데 매우 유용할 수 있습니다. 

또 다른 개선 사항은 React Native가 이제 비동기 오류에 대한 더 나은 지원을 제공한다는 것입니다. 비동기 오류는 메인 스레드와 다른 스레드에서 발생하는 오류입니다. 과거에는 이러한 오류를 디버깅하기 어려웠습니다. 그러나 React Native 0.72는 이제 비동기 오류를 처리하는 더 나은 방법을 제공합니다. 

마지막으로 React Native 0.72에는 오류 처리에 대한 몇 가지 작은 개선 사항도 포함되어 있습니다. 이러한 개선 사항에는 특정 유형의 오류에 대한 더 나은 오류 메시지와 React Native 모듈의 오류 디버깅에 대한 더 나은 지원이 포함됩니다. 

 

새로운 디버깅 도구
React Native 0.72에는 새로운 디버거와 새로운 성능 프로파일러를 비롯한 여러 가지 새로운 디버깅 도구가 포함되어 있습니다. 이러한 도구는 앱의 성능 문제를 찾아 수정하는 데 도움이 될 수 있습니다. 새 디버거는 이전 디버거보다 더 강력하고 유연한 디버거입니다. 다음과 같은 다양한 새 기능을 제공합니다. 

  • 중단점 지원: 이제 코드의 특정 줄에서 디버거를 중지하도록 코드에 중단점을 설정할 수 있습니다.
  • 변수 검사: 이제 코드에서 변수 값을 검사할 수 있습니다.
  • 호출 스택 검사: 이제 호출 스택을 검사하여 코드가 어떻게 실행되고 있는지 확인할 수 있습니다.

새로운 성능 프로파일러는 앱의 성능 병목 현상을 식별하는 데 도움이 되는 도구입니다. 다음과 같은 다양한 지표를 제공합니다. 

 

  • 프레임 속도: 프레임 속도는 앱이 초당 렌더링하는 프레임 수입니다.
    CPU 사용량: CPU 사용량은 앱이 사용 중인 CPU 시간의 백분율입니다.
    메모리 사용량: 메모리 사용량은 앱이 사용 중인 메모리 양입니다.


성능 프로파일러는 성능 문제를 일으키는 앱 부분을 식별하는 데 도움이 될 수 있습니다. 이 정보는 앱의 성능을 개선하는 데 사용할 수 있습니다. 

 

전반적으로 React Native 0.72에는 React Native 앱을 더 쉽게 개발하고 디버그할 수 있는 여러 가지 새로운 기능과 개선 사항이 포함되어 있습니다. 

새로운 TurboModules, Runtime Linking 지원, Symlink 지원, 향상된 오류 처리 및 새로운 디버깅 도구는 모두 더 나은 React Native 앱을 구축하는 데 도움이 될 수 있습니다.

 

출처 https://amir-hosseini.medium.com/react-native-0-72-a-major-release-with-new-features-and-improvements-41ea36e3cc8e

반응형