React Native에서 TouchableWithoutFeedback을 사용하여 화면을 탭하여 모달을 해제하는 방법

리액트 네이티브에서 화면을 탭하여 모달 닫기하는 방법

리액트 네이티브에서 화면을 탭하여 모달 뷰를 닫는 것은 도전적일 수 있습니다. 왜냐하면 RN 모달 컴포넌트에는 이러한 기능을 제공하는 API가 없기 때문입니다. 그러나 원하는 동작을 달성하기 위한 해결책이 있습니다.

TouchableWithoutFeedback 사용하기

화면을 탭하여 모달을 닫기 위해, 모달 컴포넌트 내에서 TouchableWithoutFeedback 컴포넌트를 사용할 수 있습니다. TouchableWithoutFeedback 컴포넌트에는 onPress 속성을 정의할 수 있으며, 이 속성은 모달을 숨기는 함수를 트리거합니다.

<span class="token tag"><span class="token tag">Modal</span></span> visible<span class="token operator">=</span>{booleanThatHandlesModalVisibility}>
  <span class="token tag"><span class="token tag">TouchableWithoutFeedback</span></span> onPress<span class="token operator">=</span><span class="token punctuation">{()</span> <span class="token operator">=></span> funcToHideModal()<span class="token punctuation">}</span>>
    <span class="token tag"><span class="token tag">View</span></span>
    ...
  <span class="token tag"><span class="token tag">/TouchableWithoutFeedback</span></span>
<span class="token tag"><span class="token tag">/Modal</span></span>

이 코드 조각은 TouchableWithoutFeedback 컴포넌트를 사용하여 모달을 닫는 방법을 보여줍니다. funcToHideModal() 함수를 onPress 핸들러로 제공하며, 화면을 탭할 때 호출됩니다.

모달의 다양한 영역 처리하기

모달의 일부 영역에서는 모달을 탭하여 숨기지 않으려는 경우, onPress 속성이 없는 추가적인 TouchableWithoutFeedback 컴포넌트를 추가할 수 있습니다. 이 추가 컴포넌트는 첫 번째 컴포넌트보다 이벤트를 먼저 잡아내어 모달의 다른 영역을 다르게 처리할 수 있습니다.

<span class="token tag"><span class="token tag">Modal</span></span> visible<span class="token operator">=</span>{booleanThatHandlesModalVisibility}>
  <span class="token tag"><span class="token tag">TouchableWithoutFeedback</span></span> onPress<span class="token operator">=</span><span class="token punctuation">{()</span> <span class="token operator">=></span> funcToHideModal()<span class="token punctuation">}</span>>
    <span class="token tag"><span class="token tag">View</span></span>
      <span class="token tag"><span class="token tag">TouchableWithoutFeedback</span></span>
        <span class="token tag"><span class="token tag">View</span></span>
        ...
      <span class="token tag"><span class="token tag">/TouchableWithoutFeedback</span></span>
    <span class="token tag"><span class="token tag">/View</span></span>
  <span class="token tag"><span class="token tag">/TouchableWithoutFeedback</span></span>
<span class="token tag"><span class="token tag">/Modal</span></span>

두 번째 TouchableWithoutFeedback 컴포넌트를 주 뷰 내에 중첩시킴으로써, 모달의 다른 영역에 대해 다른 동작을 지정할 수 있습니다.

이제 리액트 네이티브에서 화면을 탭하여 모달 뷰를 닫을 수 있는 방법을 알게 되었습니다. 비록 RN 모달 컴포넌트에서 이러한 기능을 제공하지 않더라도, TouchableWithoutFeedback 컴포넌트를 활용하고 알맞은 onPress 핸들러를 정의함으로써 원하는 동작을 달성하고 사용자 친화적인 경험을 앱에서 제공할 수 있습니다.

참고 자료 : 

reactjs