FlatList에서 re-render시, 변경된 item만 re-render할 수 있나요?

flatList 으로 array의 데이터를 랜더링 해주고 있는데요

데이터가 많아지면 데이터중 하나 변경사항이 생길때마다 리랜더링하는데 시간이 오래걸리는거 같아서요
배열중에 변경된 데이터만 리랜더링해서 해줄수는 없나요?

예를 들어서

ItemList=[

{
index : 1,
name: ‘홍길동’,
isSelected: false,
},
{
index : 2,
name: ‘김수완무’,
isSelected: false,
},
{
index : 3,
name: ‘거북이’,
isSelected: false,
},

]
<FlatList
data={ItemList}
renderItem={({ item, index, separators }) =>
ItemView({item, onSelect, onDelCard})
}
keyExtractor={(item, index) => ‘item’+index }
/>

요런식으로 해서 아이템을 클릭할때마다 isSelected가 Ture로 변환되고 배경색갈이 변경되는 식으로 만들었습니다.

그런데 아이템 갯수가 많아지면서
딜레이가 꽤 생겨서 답답해서 못쓸지경이 되었습니다.

클릭했을때 모든 아이템들이 리랜더링 되서 그런거 같은데,
변경되지 않은 아이템들은 놔두고, 변경된 아이템만 리랜더링 해줄수 있는 방법이 있을까요?

고수님들 답변 부탁드립니다. 감사합니다.

글쓴사람인데요 변경이 없는 item들은 리랜더링 안하는 방법을 찾고있습니다.

구조를 변경하시고, React.memo 로 컴포넌트를 감싸서, 리렌더링을 방지해보세요

const ListView = () => {
  const [list, setList] = useState([{ index: 1, name: '홍길동' }, ... ]);
  const [selectedIndex, setSelectedIndex] = useState(0);
  const renderItem = useCallback(({item, index}) => {
    return <Component isSelected={index === selectedIndex} />
  },[selectedIndex])
  
  return <FlatList data={list} renderItem={renderItem} />
}


const Component = React.memo((props) => {
  return <View style={{backgroundColor: props.isSelected ? 'red' : 'gray' }} />
})
좋아요 1

빠른댓글 감사합니다 방구님
React.memo 를활용하여 잘 해결하였습니다.

여기보면 추가정보 있네요