Windows용 React Native를 사용하여 데스크톱 앱 빌드 시작

아티클
06/29/2023

Windows용 React Native를 사용하면 React를 사용하는 UWP(유니버설 Windows 플랫폼) 앱을 만들 수 있습니다.

React Native 개요

React Native는 Facebook에서 만든 오픈 소스 모바일 애플리케이션 프레임워크로, 네이티브 UI 컨트롤을 제공하고 네이티브 플랫폼에 대한 모든 액세스를 제공하는 Android, iOS, 웹 및 UWP(Windows)용 애플리케이션을 개발하는 데 사용됩니다. React Native 작업을 수행하려면 JavaScript 기본 사항을 이해해야 합니다.

React Native에 대한 일반적인 정보는 React 개요 페이지를 참조하세요.

전제 조건

시스템 요구 사항 페이지에서 Windows용 React Native를 사용하기 위한 설치 요구 사항을 확인할 수 있습니다. Windows 설정 앱에서 개발자 모드가 설정되어 있는지 확인합니다.

Windows용 React Native 설치

다음 단계를 수행하면 Windows용 React Native를 사용하는 Windows 데스크톱 앱을 만들 수 있습니다.

명령줄 창(터미널)을 열고 Windows 데스크톱 앱 프로젝트를 만들려는 디렉터리로 이동합니다.
NPX(노드 패키지 실행자)와 함께 이 명령을 사용하면 추가 도구를 로컬로 설치하거나 전역으로 설치하지 않고도 React Native 프로젝트를 만들 수 있습니다. 이 명령을 실행하면 <projectName>에 지정된 디렉터리에 React Native 앱이 생성됩니다.
```
npx react-native init <projectName>
```
특정 React Native 버전으로 새 프로젝트를 시작하려면 --version 인수를 사용할 수 있습니다. React Native 버전에 대한 자세한 내용은 버전 - React Native를 참조하세요.
```
npx react-native@X.XX.X init  <projectName> --version X.XX.X
```
프로젝트 디렉터리로 전환하고 다음 명령을 실행하여 Windows용 React Native 패키지를 설치합니다.
```
cd projectName
npx react-native-windows-init --overwrite
```
앱을 실행하려면 먼저 웹 브라우저(Microsoft Edge)를 시작한 후 다음 명령을 실행합니다.
```
npx react-native run-windows
```

Visual Studio를 사용하여 React Native 데스크톱 앱 디버깅

다음 옵션을 선택한 상태로 Visual Studio 2022를 설치합니다.
- 워크로드: C++를 사용한 데스크톱 개발 및 유니버설 Windows 플랫폼 개발
- 개별 구성 요소: 개발 작업 및 Node.js 개발 지원
Visual Studio의 애플리케이션 폴더에서 솔루션 파일을 엽니다(예: <projectName>으로 AwesomeProject를 사용하는 경우 AwesomeProject/windows/AwesomeProject.sln).
실행 단추 왼쪽, 팀 및 도구 메뉴 항목 아래에 있는 콤보 상자 컨트롤에서 디버그 구성 및 x64 플랫폼을 선택합니다.
프로젝트 디렉터리에서 yarn start를 실행하고 React Native 패키지 작성 도구에서 성공으로 표시할 때까지 기다립니다.
VS에서 플랫폼 콤보 상자 컨트롤 오른쪽에 있는 실행을 선택하거나 디버그->디버깅하지 않고 시작 메뉴 항목을 선택합니다. 이제 새 앱이 표시되고 Chrome의 새 탭에 http://localhost:8081/debugger-ui/가 로드됩니다.
웹 브라우저에서 개발자 도구를 열려면 F12 키나 Ctrl+Shift+I 키를 선택합니다.

Visual Studio Code를 사용하여 React Native 데스크톱 앱 디버깅

Visual Studio Code 설치
VS Code에서 애플리케이션 폴더를 엽니다.
VS Code용 React Native Tools 플러그 인을 설치합니다.

애플리케이션 루트 디렉터리 vscode/launch.json에 새 파일을 만들고 다음 구성을 붙여 넣습니다.

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug Windows",
            "cwd": "${workspaceFolder}",
            "type": "reactnative",
            "request": "launch",
            "platform": "windows"
        }
    ]
}

F5 키(또는 Ctrl+Shift+D 키)를 눌러 디버그 메뉴로 이동하고 디버그 드롭다운에서 "Windows 디버깅"을 선택한 후 녹색 화살표를 눌러 애플리케이션을 실행합니다.