[React Native] 카테고리 변경 시 스크롤 최상단 이동

1. 기능

리스트가 포함된 화면에 여러 카테고리 탭이 있을 때, 사용자가 카테고리를 변경할 때마다 FlatList가 최상단으로 자동 스크롤되도록 하는 기능을 추가했다.
-> 카테고리 변경 후 스크롤 위치를 초기화해 사용자 경험을 개선

2. 코드 설명

• useRef 사용: useRef를 이용해 FlatList의 참조를 가져오고, 이를 통해 스크롤 위치를 제어
• useEffect 활용: 카테고리가 변경될 때마다 최상단으로 스크롤되도록 useEffect로 동작을 지정한 후 sort라는 상태값이 변경될 때마다 scrollToOffset 함수를 호출해 offset을 0으로 설정

코드 예시:

import React, { useRef, useEffect } from 'react';
import { FlatList } from 'react-native';

const ExampleComponent = ({ data, sort }) => {
  const flatListRef = useRef(null);

  useEffect(() => {
    if (flatListRef.current) {
      flatListRef.current.scrollToOffset({ offset: 0, animated: true });
    }
  }, [sort]); // 카테고리 변경 시 트리거

  return (
    <FlatList
      ref={flatListRef}
      data={data}
      renderItem={({ item }) => <ItemComponent item={item} />}
      keyExtractor={(item) => item.id}
    />
  );
};

3. 기능 개선 포인트

기존 코드도 충분히 잘 동작하지만, 스크롤 초기화만 필요한 경우 조금 더 간단하게 구현할 수도 있었다.

• scrollToIndex 사용: scrollToOffset 대신 특정 인덱스로 이동하는 scrollToIndex를 사용해 최상단으로 스크롤하는 방법
  -> 이 경우, index를 0으로 설정해 최상단으로 이동
• 애니메이션 사용 여부 선택: animated 속성을 false로 설정하면 즉시 이동하는 효과를 낼 수 있다.

업그레이드 코드 예시:

useEffect(() => {
  flatListRef.current?.scrollToIndex({ index: 0, animated: false });
}, [sort]);

이 방법을 활용해 FlatList를 더욱 유연하게 조작할 수 있었다.