[React Native 삽질기] #1 - 초기 프로젝트 기본 컴포넌트 훑어보기

처음에 npx react-native init 로 시작하면, App 이 다음과 같은 형태로 되어있다.

import React from 'react';
import type {Node} from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

import {
  Colors,
  DebugInstructions,
  Header,
  LearnMoreLinks,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

const Section = ({children, title}): Node => {
  const isDarkMode = useColorScheme() === 'dark';
  return (
    <View style={styles.sectionContainer}>
      <Text
        style={[
          styles.sectionTitle,
          {
            color: isDarkMode ? Colors.white : Colors.black,
          },
        ]}>
        {title}
      </Text>
      <Text
        style={[
          styles.sectionDescription,
          {
            color: isDarkMode ? Colors.light : Colors.dark,
          },
        ]}>
        {children}
      </Text>
    </View>
  );
};

const App: () => Node = () => {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <Header />
        <View
          style={{
            backgroundColor: isDarkMode ? Colors.black : Colors.white,
          }}>
          <Section title="Step One">
            Edit <Text style={styles.highlight}>App.js</Text> to change this
            screen and then come back to see your edits.
          </Section>
          <Section title="See Your Changes">
            <ReloadInstructions />
          </Section>
          <Section title="Debug">
            <DebugInstructions />
          </Section>
          <Section title="Learn More">
            Read the docs to discover what to do next:
          </Section>
          <LearnMoreLinks />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
  highlight: {
    fontWeight: '700',
  },
});

export default App;
  

일단 여기서 뭘 없애고 가져가야할지 모르겠어서 궁금한거 몇가지를 뜯어봤다.

기본 컴포넌트 살펴보기

1. SafeAreaView

App.js의 return 부분의 최상단은 이것이 감싸고 있다.

<SafeAreaView style={backgroundStyle}>
</SafeAreaView>

공식문서에서 확인해보니, 아래와 같이 말하고 있었다.

SafeAreaView renders nested content and automatically applies padding to reflect the portion of the view that is not covered by navigation bars, tab bars, toolbars, and other ancestor views. Moreover, and most importantly, Safe Area's paddings reflect the physical limitation of the screen, such as rounded corners or camera notches (i.e. the sensor housing area on iPhone 13).

노치 부분을 제외하고 적용하게 해주다니! 이전에는 노치부분때문에 애를 많이 먹었다고 하던데, 매우 감사할 따름! 하지만 관련 포스팅을 보니 막상 편한것만은 아닌 듯 하다,, 일단 살려두지만 추후에 노치부분을 제외할 또 다른 좋은 라이브러리가 있다면 사용할 예정!

2. StatusBar

<StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />

앱을 처음 만들어보는 입장에서 status bar 라는게 조금 헷갈렸는데, 공식 문서에서 아래 문장을 읽어보니 단번에 이해가 되었다!

Component to control the app's status bar. The status bar is the zone, typically at the top of the screen, that displays the current time, Wi-Fi and cellular network information, battery level and/or other status icons.

상태바를 따로 조작해야하는 경우 (스플래시 화면에서 숨긴다든지)에 쓸 수 있을 것 같다! 이건 고대로 가져가야겠다. 다크모드는 없으니 변경해주고 ㅎ

3. ScrollView && View

  <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <View
          style={{
            backgroundColor: isDarkMode ? Colors.black : Colors.white,
          }}>
          <Section title="Alji 테스트">
            Edit <Text style={styles.highlight}>App.js</Text> to change this
            screen and then come back to see your edits.
          </Section>
        </View>
      </ScrollView>

이름 그대로 여러 컴포넌트와 View를 담아 스크롤 할 수 있는 container인 것 같은데, 공식문서에서 다음과 같은 특이점을 발견했다.

ScrollView vs FlatList

ScrollView renders all its react child components at once, but this has a performance downside.

FlatList renders items lazily, when they are about to appear, and removes items that scroll way off screen to save memory and processing time.

이 말인 즉슨 ScrollView는 한꺼번에 다 렌더링 하기 때문에 헤비하고, FlatList는 적재적소에 맞게 렌더링이 되기 때문에 조금 더 유연한(?) 개발이 가능하다는 것이다.

결론은 ScrollView는 데이터가 고정적이고 데이터양이 많지 않을 때 사용하고, FlatList는 데이터의 양을 예측할 수 없는 경우(API를 통해 외부에서 크기를 알 수 없는 데이터를 가져오는 경우)에 사용한다!

거의 FlatList를 쓰겠군.. ^^

4. 기타

그 밖에 Section 또는 Text는 기존 html tag와 비슷하기 때문에 패스한다! 앞으로 쓰면서 또 업데이트 하겠당~!!