한줌의 모래같은 프로그래밍 팁

단계별 성능 최적화 계획1. 메모리 누수 방지1.1 메모리 누수가 발생하는 일반적인 원인const BadExample = () => { useEffect(() => { const interval = setInterval(() => { fetchData(); }, 1000); // 메모리 누수 발생! cleanup 함수 없음 }, []);};1.2 메모리 누수 해결 방법const GoodExample = () => { useEffect(() => { const interval = setInterval(() => { fetchData(); }, 1000); return () => { clearInterval(interval); ..

현재 react-native 0.77.0 기준으로 react-native-gesture-handler 를 ios에 설치하고 빌드할때 오류가 발생한다. 해당 오류의 원인이 무엇인지 파악하지는 못하였지만 아래와 같이 해결하였다. 파일명 : /node_modules/react-native-gesture-handler/apple/RNGestureHandlerModule.mm#import #import  해당하는 import를 주석처리하고 if (dynamic_pointer_cast(shadowNode)) { return jsi::Value(true); } if (dynamic_pointer_cast(shadowNode)) { return js..

getItemLayout에 대해 gpt에게 물어보니 다음과 같이 답변해주었습니다.getItemLayout은 FlatList가 각 아이템의 크기와 위치를 미리 알 수 있도록 하여 스크롤 성능을 개선합니다. 이 prop을 사용하면 FlatList가 불필요한 크기 계산을 줄이고 렌더링 효율성을 높일 수 있습니다.보통 getItemLayout을 포함한 FlatList는 아래와 같이 작성됩니다.const getItemLayout = (data, index) => ({ length: ITEM_HEIGHT, // 아이템 높이 offset: ITEM_HEIGHT * index, // 오프셋 index, // 인덱스});이때 아이템의 높이값을 우선적으로 제시하여 최적화된 렌더링에 도움을 준다고 알려져 있는데요. 이..

React Native에서 FlatList는 대량의 데이터를 효율적으로 렌더링하는 데 필수적인 컴포넌트입니다. 하지만 잘못 사용하면 스크롤 성능 저하나 메모리 사용량 증가와 같은 문제가 발생할 수 있습니다. 이 글에서는 FlatList의 성능을 최적화하는 다섯 가지 실용적인 방법을 자세히 설명하겠습니다. 각 방법은 실제 프로젝트에서 성능 문제를 해결하는 데 유용하며, 특히 대량의 데이터를 다룰 때 효과적입니다. 1. shouldComponentUpdate를 사용해 불필요한 렌더링 방지방법 설명shouldComponentUpdate는 컴포넌트가 렌더링되어야 하는지 여부를 결정하는 생명주기 메서드입니다. 이를 활용하면 불필요한 렌더링을 방지할 수 있어 성능을 개선할 수 있습니다. FlatList에서 각 아이..