이제 본격적인 프로젝트에 앞서 디자인적인 고민을 줄이고자 NativeBase를 사용한다는 이야기를 전달 받고 NativeBase를 사용해봤다.
기존 ToDoList의 StyleSheet를 NativeBase로 바꿔보며 공부한 내용을 정리한다.
NativeBase 공식문서: https://docs.nativebase.io/
1. Utility Props
속성값을 적을 때 대체적으로 줄여서 사용한다.
margin -> m
padding -> p
방향을 정해줄 때는
margin-left -> ml
paddign-left -> pl
이런식으로
양쪽 모두 값을 주고 싶을 땐 x축과 y축을 사용해
margin-left and margin-right -> mx
margin-top and margin-bottom -> my
등으로 사용했다.
초반엔 많이 헷갈리겠지만 사용하다보면 많이 편해질 듯 싶다.
2. Layout
전체적으로 Flex를 이용하는 건 비슷하다.
다만 Stack이라는 아이템을 나열하는 방법이 조금 달라졌다.
Stack의 direction 속성을 사용해 row와 column을 조절할 수 있고 space속성을 이용해 공간 안의 아이템의 개수까지 조절할 수 있다.
물론 HStack(row), VStack(column), ZStack(z-index) 등의 속성으로 한 번에 나열하는 것도 가능하다.
아직 Flex와의 차이는 정확히 모르겠지만 사용하다보면 알게 되겠지..!
3. Hooks
개인적으로 반가웠던 부분이다.
Modal, Clipboard, MediaQuery, Token, Theme, DarkMode 등 유용하게 사용할 수 있을 법한 커스텀 훅들이 제공되고 있었다.
아직 전부를 사용해보진 못했지만 이번 프로젝트를 통해 유용한 기능을 하나 더 익힐 수 있을 것 같다.
이 외에도
버튼, 메뉴, 텍스트, 아이콘, 인풋창, 링크 등 아주 다양한 커스텀 기능들이 제공되고 있는데 처음엔 그저 부트스트랩처럼 그냥 갖다 쓰는 건가보다 했지만 사용하면 할 수록 훨씬 더 쉽게 커스텀이 가능하고 사용하기 간편하다는 점에서 NativeBase를 자주 사용하게 될 것 같다.
inline style을 사용하면 지저분해지고 가독성이 떨어지던 단순 css와는 다르게 어차피 StyleSheet로 한 컴포넌트안에 집어넣어야 하는 ReactNative는 오히려 inline style로 직관적으로 볼 수 있는 이런 NativeBase가 좋을 수도 있다는 pratt의 이야기를 듣고 늘 열린 사고로 새로운 것을 유연하게 받아들일 수 있는 마음을 가져야겠다고 생각된 하루였다.
