Flexbox ❓
Flexbox는 CSS의 레이아웃 모델 중 하나로, 요소들을 1차원적으로 정렬하는 컨테이너를 만들 수 있도록 도와준다. 프론트엔드 작업을 해 본 개발자라면 한번쯤은 다루어 봤을 녀석.
Flexbox는 원래도 가장 애정하는 레이아웃이지만, 유독 이번 모바일 앱 프로젝트를 진행하며 정말 많이 다루게 되었다. 사실, 리액트 네이티브 프로젝트를 진행한다면 그럴 수 밖에 없다! 대체 왜?
알파이자 오메가 ⭐
이유는 간단하다. 리액트 네이티브에서는 Flexbox만을 이용하여 작업해야 한다! 기존 웹 환경과 다르게 Grid와 같은 고급 레이아웃 모델을 지원하지 않기 때문.
리액트 네이티브의 특성들 역시 이러한 부분에 한몫 거든다. 요소를 구성하는 가장 기본적인 컴포넌트인 <View>에는, 기본적으로 Flexbox 가 활성화되어 있으며, Flexbox 의 프로퍼티들(aliginItems, justifyContent 등)을 바로 사용 가능하다.
결론은, 리액트 네이티브에서 UI를 구현하다 보면 주구장창 Flexbox를 다루게 될 것이라는 것~
웹 환경과의 차이점 ❗
기본적으로 리액트 네이티브의 Flexbox 는 웹 CSS 의 Flexbox와 유사하지만, 약간의 차이점들이 존재한다. 이 차이점들을 명확히 인지하고 있다면 예기치 않은 동작을 피할 수 있고, 디버깅에서도 유리하게 작용할 수 있다 🫡
첫 번째 차이점은 웹 환경의 Flexbox에서는 기본적으로 자식 요소들이 가로로 정렬되지만, 리액트 네이티브에서는 세로로 정렬된다는 것. 이렇게 한 개발진들의 이유는 모르겠지만, 생각해 보면 모바일 기기의 뷰포트는 세로로 길고, 웹 페이지는 가로로 기니까.. 이걸 연상하면 까먹지 않을 듯 하다.
두 번째 차이점은 px, % 와 같은 단위를 기본적으로 사용하지 않는다는 것이다. 리액트 네이티브의 스타일링에 사용되는 숫자는 모두 dp 를 의미한다. 이는 density-independent pixel 의 약자로, 화면의 물리적 크기와 상관없이 동일한 크기를 유지하기 위해 사용하는 단위이다. 기기의 해상도를 의미하는 수치인 dpi 에 따라 가변적으로 변하는 값이다.
이해를 위해 예를 하나 들자면 160 dpi 화면에서 100 dp는 100 px에 해당한다. 그러나 320 dpi 화면에서는 100 dp가 200 px에 해당한다. 이와 같이 dp 는 기기의 해상도에 따라 가변적인 값이기에, 다양한 해상도의 기기를 하나하나 고려할 필요 없이 스타일링할 수 있는 것. 이 얼마나 편리한가~
이외에도 다양하고 세세한 차이점들이 더 존재한다. 웹에서 CSS속성을 부여하기 위해서는 flex-direction: row; 와 같이 케밥 케이스의 문법을 사용하는데 반해, 리액트 네이티브에서는 justifyContent: 'center' 와 같이 카멜 케이스를 사용하는 등.. 세세한 속성에도 약간의 차이가 존재하지만, 원체 유사해서 FE 개발 경험이 있다면 무리 없이 이해할 수 있을 것 😄
