[ReactNative] Component | 02. ScrollView - 스크롤 만들기

ScrollView는 콘텐츠의 길이가 모바일 기기의 화면 크기를 벗어날 때 사용자가 모든 내용을 볼 수 있도록 스크롤(Scroll)기능을 제공하는 요소입니다.

구성요소

ScrollView는 두 가지 부분으로 이루어져 있습니다.

• Container는 스크롤할 내용을 담을 공간입니다. Container의 부모는 반드시 높이가 고정되어 있어야 하며, 전체 화면보다 커질 수 없습니다.
• Content는 실제로 스크롤될 내용입니다. 이 부분은 전체 화면보다 커질 수 있으며, 화면을 넘어서면 스크롤 되어 내용을 확인할 수 있습니다.

이에 따라 ScrollView에 스타일을 적용할 수 있는 곳도 두 가지가 존재합니다. Container의 스타일을 적용하려면 똑같이 style 값을 을 작성하면 되지만, Content의 스타일을 적용하려면 contentContainerStyle 이라는 값을 작성해야 합니다.

<ScrollView
  style={{ flex: 1, backgroundColor: 'red' }}
  contentContainerStyle={{ padding: 16 }}
>

// tailwind를 사용하는 경우
<ScrollView
  className="flex-1"
  contentContainerClassName="px-4 py-6"
>

예를 들어 스크롤 되는 글을 가운데 정렬하고 싶다면, style이 아닌 contentContainerStyle에서 스타일 값을 지정해주어야 하는 식입니다.

// 이렇게 하면 글이 가운데 정렬되지 않음
<ScrollView style={{ 
  justifyContent: 'center',
  alignItems: 'center'
}}>

// 올바른 예시
<ScrollView contentContainerStyle={{
    justifyContent: 'center',
    alignItems: 'center',
}}>

style 값을 지정하는 대표적인 경우는 배경 색상을 변경하는 경우가 있겠습니다.

<ScrollView style={{ backgroundColor: '#fff' }}>

주의할 점

앞서 말했듯 ScrollView는 반드시 높이가 정해진(bounded) 부모 안에 있어야 스크롤 가능합니다. 아래와 같이 상위 요소에서 높이를 지정해도, ScrollView 바로 위 부모 요소의 높이가 지정되어 있지 않다면, 스크롤이 동작하지 않습니다.

<View style={{ flex: 1 }}>  // 여기서 높이를 정의해도
  <View>                    // 여기서 flex가 빠져 높이가 정의되지 않음
    <ScrollView />
  </View>
</View>

높이를 지정할 수 있는 방법은 직접 길이를 지정하는 방법과 flex를 이용하는 방법이 있는데, 전자의 경우 기종마다 화면의 크기가 달라지기 때문에 추천하는 방법이 아니라고 합니다. flex: 1 스타일을 사용하면 남는 공간을 자동으로 가져가지 때문에, 유연한 반응성을 가질 수 있습니다.

// 방법 1. 길이 지정
<ScrollView style={{ height: 500 }} />

// 방법 2. flex
<View style={{ flex: 1 }}>
  <ScrollView />
</View>

 

+) ScrollView는 한 번에 Content의 모든 내용을 랜더링하기 때문에, 내용이 많을 경우 부하가 있다는 단점이 있습니다. FlasList는 이 문제를 해결하여 화면에 보이지 않는 요소는 랜더링하지 않고, 화면에서 벗어나는 요소도 랜더링에서 제거하여 부하를 줄일 수 있습니다.