react native cli widget

박정빈·2025년 10월 11일

React Native 사용기

목록 보기
21/28

IOS

1. React Native 프로젝트의 ios 폴더에서 Xcode를 열어요~

2. 좌측 프로젝트 탐색기에서 프로젝트명을 선택합니다.

3. 상단 File > New > Target 메뉴를 클릭합니다.

4. Widget Extension 또는 WidgetKit Extension 유형을 찾아 선택합니다.

5. 아래 이미지처럼 위젯 이름을 정하고, 필요한 옵션(Live Activity 등)을 선택 후 생성합니다.

ios widget activate process
옵션 (이미지에서 왼쪽 창)
Live Activity: 진행률 바와 같은 동적 UI를 원할때
Control: 위젯에서 뭔가 직접 조작(체크, 버튼 등)을 해야할 때
Configuration App Intent: 사용자가 위젯 형태, 옵션 등을 직접 설정할 수 있도록 만들고 싶을때
scheme설정 (이미지에서 오른쪽 창)
Activate: 위젯 개발 및 디버깅을 바로 진행하려면 이걸 누르세요. 앞으로 위젯을 빌드, 실행, 디버깅할 때 해당 스킴이 기본으로 선택됩니다.
Don't Activate: 지금은 위젯을 활성화하지 않고, 기존 앱 타겟으로 계속 작업하겠다는 의미

6. Activate를 누르면 Swift 파일들이 생성되고 거기에 위젯 UI를 구성한다.

7. AppGroup설정

7.1. Main App Target (daydot)
7.1.1. Xcode에서 daydot.xcworkspace 열기
7.1.2. 프로젝트 네비게이터에서 daydot 프로젝트 선택
7.1.3. TARGETSdaydot 선택
7.1.4. Signing & Capabilities 탭으로 이동
7.1.5. + Capability 버튼 클릭
7.1.6. App Groups 추가
7.1.7. + 버튼을 눌러 새 그룹 추가: group.com.jeong.daydot
7.1.8. 체크박스 선택하여 활성화
7.2. Widget Extension Target (progressWidget)
7.2.1. TARGETSprogressWidget 선택
7.2.2. Signing & Capabilities 탭으로 이동
7.2.3. + Capability 버튼 클릭
7.2.4. App Groups 추가
7.2.5. 동일한 그룹 선택: group.com.jeong.daydot
7.2.6. 체크박스 선택하여 활성화

8. Xcode에서 파일 추가

8.1. code 프로젝트 네비게이터에서 daydot 폴더(프로젝트 폴더)를 찾아서 우클릭→ Add Files to "daydot" 선택
8.2. /Users/user/Projects/daydot/ios/daydot/WidgetDataManager.swift
/Users/user/Projects/daydot/ios/daydot/WidgetDataManager.m
선택해서 추가
추가할때 target을 프로젝트로 선택 (위젯x)

9. 빌드 -> 위젯 되는지 확인!

0개의 댓글