React Native 앱을 개발하면서 공통적으로 적용되는 규칙을 정리해보려 한다.

⚛️ React Native 공식문서 모아보기

• View Component
• Layout with Flexbox
• Text Component
• StyleSheet

📦 View Component

• View Component는 div tag와 비슷하다.
• 다만 다른 점은 모든 View Component에는 FlexBox Layout이 적용되어 있다.
  • 웹 관점에서 보면 display: flex CSS style이 이미 적용되어 있는 것이다.
  • 웹에서와 다르게 Flex Direction 기본값이 column이다.
• Flexbox는 다양한 스크린 크기에서 일관된 레이아웃을 제공하도록 설계되어 있다. 👍

📝 Text Component

모든 text는 Text component 안에서 렌더링되어야 한다!!

💅 Style

• 일부 style property는 사용할 수 없다.
  • ex) border: "1px solid black" -> 🚫 "border" is not valid style property
  • 대신, borderWidth와 borderColor property가 있다.
• 하지만, 웹에서는 없는 style property가 있다.
  • ex) paddingVertical, paddingHorizontal, marginVertical, marginHorizontal
• StyleSheet.create => Style Object 생성, 자동완성 기능 좋음
• 브라우저와 달리 잘못된 style 속성값을 입력하면 ⚠️ error message를 보여준다.