React Native - ScrollView / 스크롤 가능한 목록 만들기

할일 목록이 많아져서 화면을 채웠을 때, 스크롤이 가능해야 모든 자료를 확인할 수 있다.

지금까지 잘 사용했던 View 컴포넌트는 내부 요소가 많아져도 스크롤 할 수 없다.

 

ScrollView

ScrollView는 요소가 많아지면 스크롤 할 수 있는 기능을 제공한다.

import styled from "styled-components/native";
import Task from "./components/Task";
 
const List = styled.ScrollView`
  // flex와 width를 설정해 줘야 한다.
  flex: 1;
  width: ${({ width }) => width - 40}px;
`;
 
export default function App() {
  const tempData = {
    1: { id: "1", text: "React Native", completed: false },
    2: { id: "2", text: "Expo", completed: true },
    3: { id: "3", text: "Javascript", completed: false },
  };
  
  return (
    <List width={width}>
        {Object.values(tempData).reverse().map((item) => (
            <Task key={item.id} text={item.text} />
        ))}
    </List>
  );
}
 

style에서 flex와 width를 설정해주었다.

ScrollView가 스크롤 작업을 수행하기 위해서는 제한된 공간이 필요하기 때문에 flex와 height를 설정해줘야 한다. flex:1로, height는 상위 컴포넌트에서 설정해주었다.

ScrollView안의 내용은 map을 통해 저장된 데이터를 나타내도록 작성했다.

 

 

FlatList

React Native에서 스크롤이 가능한 컴포넌트로는 FlatList도 있다.

ScrollView와 구별되는 특징은, ScrollView는 모든 자식 요소를 처음에 렌더링하고,

FlatList는 화면에 자식 요소가 나타날 때 랜더링하고, 화면 밖에서 사라지면 항목을 제거하는 점이 큰 차이점이라고 한다.

이런 특징 덕분에 목록에 표시해야할 요소가 많으면 FlatList를 추천한다고 한다.

 

 

참고한 페이지

https://reactnative.dev/docs/scrollview

ScrollView · React Native