리액트 네이티브 초보자를 위한 UI 팁들

리액트 네이티브 앱 개발 시 IOS 와 Android 의 화면 호환성

실질적으로 IOS 와 Android 둘 따로 코딩해야 할 일이 많지만, 아래의 규칙을 지키면 어느정도는 호환이 된다.

• 화면은 작은 화면을 기준으로 작업하는 것이 좋다.
  • 작은 화면으로 작업하면 큰 화면으로 봐도 상대적으로 덜 깨진다.
• 아이폰을 기준으로 작업하는 것이 좋다.
  • 아이폰을 기준으로 작업하면 안드로이드에서 봤을 때 상대적으로 덜 깨진다.

호환성있는 화면을 그리기 위한 결론

화면 작은 아이폰으로 코딩하면, 깨질 일이 최소화된다.

리액트로 만든 웹을 리액트 네이티브로 가져올 수 없다.

절대 가져올 수 없고, 공통되는 것도 하나도 없다. 단, 리덕스와 같은 비즈니스 로직은 재사용 가능하다.

UI 상의 모든 것이 리액트 네이티브 자체 클래스로 되어있다.

모바일 컴포넌트를 웹 컴포넌트와 1:1 로 매칭시키는 것은 좋지 않지만, 비유를 위해 임시적으로 그렇게 한다.

• <View>: <div> 에 대응된다. flexbox, style, touch handling, accessibility controls 등 다양한 기능을 지원한다.
  • 단, 컨테이너의 역할만 할 뿐, <View> 내부에 텍스트를 직접적으로 넣거나 하면 안된다. <View><Text>텍스트</Text></View> 와 같이 작성해야 한다.
• <Text>: <p> 에 대응된다. displays, styles, nests strings of text,handling touch events 등 다양한 기능을 지원한다.
• <Image>: <img> 에 대응된다. 여러 타입의 이미지를 지원한다.
• <ScrollView>: <div> 에 대응되는데, 스크롤 있는 요소들을 담는 컨테이너로서 활용된다. 여러 개의 컴포넌트와 뷰를 담을 수 있다.
  • 단, <ScrollView> 는 너무 많은 컴포넌트를 담을 경우 성능 문제가 생긴다.
• <FlatList>: <ScrollView> 내부에 많은 요소를 넣어야 할 때, 성능 문제가 생기는 경우에 <ScrollView> 를 대체한다.
• <TextInput>: <input type="text"> 에 대응된다. 사용자에게 텍스트를 입력받을 때 사용한다.
• <SafeAreaView>: 화면의 노치와 같이 죽은 부분을 사용하지 않는 <View> 이다. 화면은 약간 작아지지만, 화면에서 가려지는 부분이 없게 해준다.
• <StatusBar>: 상태 창의 색상과 같이 상태창에서 컨트롤할 수 있는 부분을 컨트롤할 때 사용한다.

StyleSheet.create({}) 를 이용하자

• inline style 을 주는 방법도 있지만, 내부 구현을 보았을 때 StyleSheet.create({}) 를 이용하는 것이 성능적으로 훨씬 유리하다.
• 코드 정리에도 유리하다.

다만, 생각해볼 것

• 단, 드라마틱하게 좋아지진 않는다.
• 일반 js 인라인 스타일과 달리 조건문을 사용하는 것이 불가능하다.
• 아래는 조건 문의 예제이다.

<Text
  style={[
    styles.sectionTitle,
    {
      color: isDarkMode ? Colors.white : Colors.black, // 위의 스타일에 덮어씌워진다.
    },
  ]}
/>

단위를 px 로 입력하지 말자

• 모바일에서는 dp 라는 자체적인 단위를 사용한다. 웹과는 다름을 유의하자.
  • 그러니 순수한 숫자만 입력하자.
• dp 는 해상도만 같으면 모두 같은 공간을 차지함을 보장할 수 있다.

DP (Density-independent Pixels) - an abstract unit that is based on the physical density of the screen. These units are relative to a 160 dpi screen, so one dp is one pixel on a 160 dpi screen. The ratio of dp-to-pixel will change with the screen density, but not necessarily in direct proportion. Note: The compiler accepts both "dip" and "dp", though "dp" is more consistent with "sp".

CSS 스타일링은 CamelCase 이다

JS 에서는 - 가 마이너스의 의미이기 때문에, CSS 파일처럼 - 로 이어낼 수 없다.

CSS 속성 중 구현된 것도 있고 아닌 것도 있다

웹에 있는 CSS 가 전부 똑같이 구현되어 있진 않다.

React Native 에서 지원하는 스타일이 https://github.com/vhpoet/react-native-styling-cheat-sheet 여기 나와있긴 한데, 문서 자체가 너무 오래됐다. 그러나 공식문서에는 아예 똑바로 정리된 게 없어서 볼 게 없다.

하나의 화면에는 컴포넌트 하나만 넣자

일반적으로는 파일 정리를 위해 하나만 사용하는 것이 좋다. 다만, 예외 적으로 여러 개가 있는 게 깔끔하다면 여러 개를 넣자.

레퍼런스

https://reactnative.dev/docs/intro-react-native-components
인프런 - 배달앱 클론코딩