(TIL 21일차) React Native (3)

시작하기 전에 복습!

• 전 블로그에서 네비게이션이 아닌 flux를 사용해서 페이지 이동을 했으나 여러가지 문제(정보 및 커뮤니티)로 인해 navigation으로 수정해서 개발 중
• 오늘부터는 인스타그램을 클론하면서 분야를 따로 나눠서 작성하기보다는 막히는 부분에 있어서 궁금점이 있는 사항에 대해 복습하는 개념으로 작성하기로 함

---

Style 내용

인라인 속성 구별

• 인라인 스타일 속성이 적용 되는 것과 안되는 것을 구분!!
  ex) Button(X), View(O)
  

스타일 여러개 적용 방법

  style={[Navstyle.nav_icons, { left: 15 }]}

• 기존과 다르게 { } 객체안에 배열을 넣고 중복되는 스타일적용 하고 추가적으로 하고 싶은 사항은 , 뒤에 적음

---

KeyboardAvoidingView

<KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
  ... your UI ...
</KeyboardAvoidingView>;

• 인풋에 포커스가 가면 키보드가 올라가는데 기기에 따라 다르므로 스크롤 조정해주는 기능
• 가상 키보드에서 벗어나야하는보기의 일반적인 문제를 해결하는 구성 요소
• 키보드의 위치에 따라 높이, 위치 또는 하단 패딩을 자동으로 조정

---

Statusbar

<View>
  <StatusBar backgroundColor="blue" barStyle="light-content" />
  <View>
    <StatusBar hidden={route.statusBarHidden} />
    ...
  </View>
</View>

• 기기의 맨위에 상태바를 조정하는기능

---

이미지 source 경로 설정 방법 2가지

uri 직접접근

source={{uri: "https://facebook.github.io/react-native/img/tiny_logo.png"}}

로컬에 있는 이미지 접근

source={require("./assets/dm.png")}

---

ImageBackGround와 Image 차이

ImageBackground

• children를 가질 수 있어 와 같이 사용 가능

Image

• children를 가질 수 없으며 단독적으로 사용해야 함

---

Scrollview vs FlatList

Scrollview

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <ScrollView style={styles.scrollView}>
        <Text style={styles.text}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </Text>
      </ScrollView>
    </SafeAreaView>
  );
}

• ScrollView 반응하는 모든 하위 구성 요소를 한 번에 렌더링하므로 성능이 저하
• 한 번에 모든 내용에 대해 JS 구성 요소를 렌더하게 되어 렌더링 속도가 느려지고 메모리 사용량이 증가

FlaList

const DATA = [
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'First Item',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Second Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Third Item',
  },
];

function Item({ title }) {
  return (
    <View style={styles.item}>
      <Text style={styles.title}>{title}</Text>
    </View>
  );
}

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={DATA}
        renderItem={({ item }) => <Item title={item.title} />}
        keyExtractor={item => item.id}
      />
    </SafeAreaView>
  );
}  

• Lazy Loading 처럼 보이지 않는 부분은 렌더를 안한 상태고 사용자가 스크롤해서 넘기는 경우에 렌더링하게 되어 메모리적으로도 굉장히 효율적임
• 메모리와 처리 시간을 절약하기 위해 화면 밖으로 스크롤되는 항목을 제거
• horizontal={true} 사용하면 가로로 나타남

---

함수형 컴포넌트와 클래스형 컴포넌트 사용법

공통점

• 컴포넌트는 무조건 대문자로 시작하며, 스타일컴포넌트는 상관없음
• 스타일 컴포넌트는 컴포넌트 하나하나 마다 적용해줘야 함

차이점

• 클래스형은 선언 동시에 export하기 때문에 상관없음
• 함수형은 export를 따로 해줘야 함