React Native Dimensions

박은정·2022년 5월 2일
0

TIL

목록 보기
46/72
post-thumbnail

useWindowDimensionsDimensions과 달리 React 구성 요소에서 선호하는 API입니다.
이것은 화면의 사이즈가 업데이트되면 업데이트되기 때문에 리액트 패러다임과 잘 어울립니다.

다음 코드를 사용하여 애플리케이션의 창의 너비와 높이를 가져올 수 있습니다.

const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

치수 dimensions는 즉시 사용 가능하지만
디바이스가 회전하거나 foldable 기기 등으로 인해 변경될 수 있으므로 매 렌더링될 때마다 함수를 호출해야 하는 상수에 의존하는 렌더링 로직이나 스타일대신,

Dimensions은 즉시 사용 가능하지만
장치 회전이나 폴더블 장치 등으로 인해 변경될 수 있기 때문에 이러한 상수에 의존하는 렌더링 로직이나 스타일은 스타일시트에 값을 설정하는 것처럼 값을 캐시하는 대신 인라인 스타일을 사용하여 모든 렌더에서 이 함수를 호출해야 합니다.

화면 크기 또는 앱 창 크기를 변경할 수 있는 폴더블 기기 또는 스크린 사이즈나 앱 화면의 사이즈가 변경될 수 있는 디바이스를 대상으로 하는 경우, 공식문서에 나오는 예시와 같이 Dimensions 모듈에서 사용할 수 있는 이벤트 리스너를 사용할 수 있습니다.

profile
새로운 것을 도전하고 노력한다

0개의 댓글