React Native 3주차 개발일지

함수를 사용하여 component로 내보내는 방법

const method =  ()=>{
  return (<View><Image/></View>);
};
export default method;// default 처리를 하게되면 따로 구조 분해를 하지 않아도 된다.
//아싸리 바로 export 해도 된다.
export default () =>{
  	return (<View><Image/></View>);
}

SafeAreaprovider와SafeAreaview component

간단히 말하면 스마트폰의 눈에 보이는 부분의 component이다. 범위를 지정해서 화면 밖으로 component가 나가지 않도록 한다. 이것을 사용하지 않으려면 큰 컨테이너에 패딩 값을 주면서 조절 해야한다.

Scroll View

스와이프를 통해 벗어난 부분의 데이터를 볼 수 있도록 하는 목적을 갖고 있다. but 안보이는 부분 까지 렌더링을 해야 되기때문에 리소스를 많이 소비한다. map 함수를 사용해서 각 data의 요소를 가져와 뷰를 index순서대로 생성한다.

<ScrollView/>

Flatlist

화면에 보이는 부분만 렌더링 해준다. cpu 와 gpu성능이 좋아야 겠지?

 <FlatList
        data={DATA}// 실적인 데이터 
        renderItem={({item}) => <Item title={item.title}/>}// 데이터를 받아서 콜백형태로 구성해야 한다.
        keyExtractor={item => item.id}// 각 데이터에 
      />