Axios

node.js와 브라우저를 위한 Promise 기반의 HTTP 통신 라이브러리다. 상대적으로 다른 HTTP 통신 라이브러리들에 비해 문서화가 잘 되어 있고 API가 다양하다.

axios는 fetch와 비슷한 역할을 하는 라이브러리다.
fetch보다 편리하게 서버로부터 데이터를 받아올 수 있는데, 그 이유는 다음과 같다.

• internet explorer 등의 예전 버전에서 구동된다면 xmlhttprequest라는 객체를 사용하고, 최신 버전에서 구동된다면 fetch를 사용한다.
  (fetch는 예전 버전에서 동작하지 않는다.)
• 서버로부터 데이터를 받은 후, json으로 변환할 필요가 없다.

Style

Styled component

install

(for TypeScript)
yarn add @types/styled-components

usage

import styled from 'styled-components/native';

ScrollView & FlatList

ScrollView

데이터가 화면을 벗어났을 때, Scroll을 생성하여 사용자와의 상호작용을 통해 벗어난 부분을 볼 수 있게 해주는 데 그 목적이 있다.

FlatList

화면에 보여지는 부분 혹은 설정한 수만큼의 데이터만 렌더링한다.
따라서 데이터의 길이가 가변적이고, 데이터의 양을 예측할 수 없는 경우에 사용하기 적절하다.

유저의 swipe 작용에 의해 scroll이 움질일 때 필요한 부분을 추가적으로 렌더링하기 때문에, 초기 렌더링 시 효율적으로 메모리를 사용할 수 있다.

FlatList Usage

<FlatList
      keyExtractor={item => item.toString()}
      data={arr}
      renderItem={({item}) => <Item num={item} />}
      windowSize={2}
    />

• keyExtractor: key나 id같은 역할로, 해당 속성이 있으면 생략 가능하다.
• windowSize: 스크린 1개는 <FlatList> 내부에 보여지는 화면이다. 이 스크린을 기준으로 그만큼 뿌려지는 데이터를 미리 렌더링 해놓는다.

ImageBackground

Usage

<ImageBackground source={image} style={styles.image}>
      <Text></Text>
    </ImageBackground>