[React Native] 레이아웃 시스템

[React Native] 레이아웃 시스템

레이아웃 시스템 (Layout System)

페이지 레이아웃(layout, 배치라는 뜻)은 사전적으로 컴퓨터 그래픽 디자인이나 소프트웨어 디자인에서 각 구성 요소를 제한된 공간 안에서 효과적으로 배열하는 일을 말한다.

 

RN(React Native) 에서 레이아웃을 만들려면 Flexbox 를 사용해야 한다.

Flexbox는 몇 예외를 제외하고는 웹과 거의 비슷한 방식이다. RN에서는 display : block, inline-block, grid 과 같은 속성들을 사용할 수 없다.

 

웹의 Flexbox와 다른 점은 기본적으로 모든 View 가 " Flex Container " 이다. 웹에서는 부모가 flex로 지정이 되어 있어야 자식 컴포넌트들도 flex 속성을 줄 수 있지만 RN에서는 그럴 필요가 없다. 또한 웹의 FlexDirection 의 기본값 (default) 은 row 이지만 RN은 column 이 기본값이다.

 

예를 들어 아래와 같이 코드를 작성하면 다음과 같이 세로로 정렬된 것을 볼 수 있다. 하지만 레이아웃이 화면을 벗어나는 overflow 상황에서는 스크롤은 불가능하다.

 

위 코드에 부모 View 컴포넌트 style 로 flexDirection = "row" 를 준다면 아래와 같이 된다.

 

RN 레이아웃에서는 99.9% 확률로 width, height 속성은 사용하지 않는다.

모바일 기기(아이폰 13, 14, 15... 안드로이드 등)에 따라서 스크린의 사이즈는 모두 다르다. 이것에 하나하나 width, height를 주는 것은 바보같은 생각이다. 이 대신 스크린의 비율에 따라 레이아웃할 수 있는 Flex Size 를 사용한다.

 

width, height 로 주던 View style을 flex size로 주면 다음과 같아진다.

 

flex size를 늘리고 줄임으로써 각 레이아웃 부분의 비율을 조정하는 것이 RN의 레이아웃 시스템이다.

---

<출처> nomadCoder : https://nomadcoders.co/react-native-for-beginners/lectures/3123

All Courses – 노마드 코더 Nomad Coders

 

<참고> RN dev : https://reactnative.dev/docs/flexbox

Layout with Flexbox · React Native