React Native에서 권한 요청 순차적으로 진행하기

관련 PR

• App
• Web

문제점

현재, 우리 서비스는 웹뷰가 실행되면 useEffect안에서 한 번에 권한 요청을 실행한다. 이는, 사용자가 앱을 실행하자마자 여러 개의 권한 요청을 받아 불편함을 느낄 수 있다.

현재 권한 요청

1. 카메라 권한 요청
2. 갤러리 권한 요청
3. FCM 알림 권한 요청

개선 방안

카메라와 갤러리의 권한 요청의 경우, 진짜 그 기능이 필요한 곳에서 권한 요청을 하는 것이 맞다고 판단하였다.

수정 전

useDidMount(async () => {
    await getPermission('camera');
    await getPermission('photoLibrary');
    await messaging().requestPermission();
  }, []);

수정 후

// react-native
const requestOnMessage = async event => {
    const nativeEvent = JSON.parse(event.nativeEvent.data);
    const {type, data} = nativeEvent;
    switch (type) {
		// ..
      case 'GET_PERMISSION': {
        switch (data) {
          case 'IMAGE':
            await getPermission('camera');
            await getPermission('photoLibrary');
        }
      }
    }
  };

브라우저에서 전달한 메시지가 권한 요청이라면, 해당 권한 요청을 실행한다.

// next.js (웹뷰)의 이미지 업로드가 필요한 컴포넌트
useDidMount(() => {
  sendMessageToReactNative({
    type: 'GET_PERMISSION',
    data: 'IMAGE',
  });
});

React Native에 권한 요청을 하는 메시지를 전송한다.