[RN] react-native-camera-roll 라이브러리와 flatlist를 활용하여 카메라 앨범 리스트&페이징 기능 구현하기!

# 시작하기

앱을 개발하다 보면 리뷰 등의 기능에서 사용자 디바이스의 '카메라 앨범'을 불러와 사진 리스트를 출력해주어야 하는데,

해당 기능을 구현하는 데 사용해본 라이브러리 중 가장 대중적이고 편한 라이브러리인

react-native-camera-roll 라이브러리와 그 사용법, 그리고 flatlist를 통해 페이징 기능까지 구현해보자.

 

# react-native-camera-roll

기본적으로 사용자의 카메라 앨범을 불러오려면 앱의 권한과 AOS/IOS 모두 설정을 해주어야 한다.

npm 라이브러리 설치 명령어와 위 권한 관련 설정에 대해서는 도큐먼트를 잘 따라가면 순조롭게 진행된다.

https://github.com/react-native-cameraroll/react-native-cameraroll

GitHub - react-native-cameraroll/react-native-cameraroll: CameraRoll is a react-native native module that provides access to the

 

# 사용하기

권한 및 기타 설정을 완료하였다는 가정 하에 진행해보겠다.

우선 기본적으로 초기 페이지가 랜더링 되었을 때 불러올 이미지의 개수 state를 pageSize로 선언하고,

이전에는 복잡한 코드로 작업했어야 했으나 라이브러리가 업데이트되어 useCameraRoll 이라는 훅이 생겼는데,

이 훅을 선언한다.

 

const [pageSize, setPageSize] = useState(40) // 초기 랜더링되는 사진의 개수
const [photos, getPhotos] = useCameraRoll();

 

참고로, flatList로 페이징을 구현하려면 flatList의 속성인 onEndReached(스크롤링 했을 경우 화면 최하단에 닿았을 때를 감지)를 사용하는데, 이를 사용하려면 페이지를 스크롤링했을 때 한 페이지보다 컴포넌트가 적으면 페이징이 되지 않으므로

어떤 디바이스에서도 40개정도면 한 페이지는 넘은 것 같아 40으로 설정하였다.

 

이렇게 되면 준비는 모두 끝났다.

 

const [pageSize, setPageSize] = useState(40);
const [photos, getPhotos] = useCameraRoll();

 // FlatList Rendering Component
  const _RenderItem = useCallback(({ item }: any) => {
    return (
      <GetPhotoContainer>
        <GetPhotoImage
          source={{ uri: item.node.image.uri }}
          style={{ resizeMode: 'cover' }}
        />
      </GetPhotoContainer>
    );
  }, []);
  
  return (
  	<Container>
      <GetPhotoView>
        {photos && (
          <FlatList
            data={photos.edges}
            renderItem={_RenderItem}
            key={'#'}
            keyExtractor={(item, index) => '#' + index.toString()}
            // 페이징 처리
            onEndReached={() => {
              setPageSize(pageSize + 20);
            }}
            showsVerticalScrollIndicator={false}
            contentContainerStyle={{
              paddingBottom: 250,
            }}
            numColumns={3}
          />
        )}
      </GetPhotoView>
    </Container>
  )