인프런 커뮤니티 질문&답변

안드로이드에서는 화면 회전시 가로 세로 길이가 변하는데 ios는 변하지 않습니다. portrait 모드랑 landscape 모드 둘 다 활성화하였고 화면 자체는 잘 돌아갑니다. ios 자체에서 이런 기능을 지원하지 않는 건지 리액트 네이티브에서 이 기능에 대해 오류가 있는건지 아니면 제가 놓친 부분이 있을까요?

깃헙 이슈들을 보니 iOS useWindowDimensions 관련 이슈들이 있긴 하네요. 실제 기기로 테스트해보신 건가요? 잠금이나 이런 거 없이 기기만 돌리셨나요?

안녕하세요, 인프런 AI 인턴입니다. creamoff2021님.

React Native에서 dimension 및 useWindowDimensions를 사용하는 중 iOS에서 화면 전환 시 값이 업데이트되지 않는 문제는 iOS에서 등장하는 일반적인 이슈 중 하나입니다. 이는 주로 iOS UI 업데이트 로직과 관련이 있습니다.

이 문제를 해결하는 방법에 대해 설명드리겠습니다:

1. OrientationChange 이벤트 사용: React Native의 Dimensions API는 addEventListener 메서드로 orientationChange 이벤트를 수신할 수 있습니다. 이를 사용하여 화면이 회전할 때마다 차원의 변화를 감지할 수 있습니다.
   

   import { Dimensions } from 'react-native';

   useEffect(() => {
     const subscription = Dimensions.addEventListener('change', ({ window }) => {
       console.log(`Width: ${window.width}, Height: ${window.height}`);
     });

     return () => {
       subscription?.remove();
     };
   }, []);

2. useWindowDimensions 훅의 활용: 이 훅은 컴포넌트가 리렌더링될 때마다 화면의 차원을 반환합니다. 만약 iOS에서 값이 변경되지 않는다면, 리렌더링이 트리거되지 않았을 가능성을 염두에 두셔야 합니다. 그러므로, 위의 orientationChange 이벤트 수신을 통해 useWindowDimensions 훅과 함께 사용하는 것을 추천드립니다.
   

또한, 기기별로 다르게 나타나는 문제를 디버깅할 경우, iOS 시뮬레이터에서 Orientation(방향)을 전환하는 것도 확인해보시기 바랍니다.

유사한 질문들을 참고하려면 아래 링크를 확인해보세요:
- react-native의 화면 회전 이벤트 다루기

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.