React Native는 ReactDom 대신 다른 플랫폼 사용.
이벤트 처리, 상태관리 등 리액트의 핵심 기능은 웹용 리액트와 같은 방식으로 작용함.
리액트네이티브는 onClick이 아니라 onPress임.
리액트 useState
리액트(React)에서 useState는 상태(state)를 관리하기 위해 사용되는 훅(hook)입니다. useState는 함수 컴포넌트에서 상태를 추가하고 변경할 수 있는 기능을 제공합니다.
useState 훅은 배열 형태로 반환됩니다. 배열의 첫 번째 요소는 현재 상태 값이며, 두 번째 요소는 상태를 업데이트하는 함수입니다. 이 함수를 호출하면 상태가 변경되고 컴포넌트가 다시 렌더링됩니다.
전개 연산자는 점 세 개 (...)로 표현되며, JavaScript에서 객체나 배열을 펼치는 데 사용됩니다. 객체 전개 연산자와 배열 전개 연산자 두 가지 형태로 사용될 수 있습니다.
객체 전개 연산자: {...}
객체 전개 연산자는 객체의 속성들을 복사하고 다른 객체에 병합하는 데 사용됩니다. 기존 객체의 속성들을 유지한 채로 새로운 객체를 생성할 수 있습니다. 예를 들어:
javascript
Copy code
const obj1 = { name: 'Alice', age: 25 };
const obj2 = { ...obj1, city: 'Seoul' };
console.log(obj2);
// 출력: { name: 'Alice', age: 25, city: 'Seoul' }위 예제에서 obj2는 obj1의 속성을 모두 포함하면서 추가적으로 city 속성을 가지고 있는 새로운 객체가 됩니다.
배열 전개 연산자: [...]
배열 전개 연산자는 배열을 다른 배열에 펼치는 데 사용됩니다. 기존 배열의 요소들을 복사하고 다른 배열에 추가하는 것이 가능합니다. 예를 들어:
javascript
Copy code
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2);
// 출력: [1, 2, 3, 4, 5]위 예제에서 arr2는 arr1의 요소를 모두 포함하면서 추가적으로 4와 5를 가지고 있는 새로운 배열이 됩니다.
전개 연산자는 객체나 배열을 편리하게 조작하고 복사하는 데 사용되며, 코드의 가독성과 유지 보수성을 향상시키는 데 도움을 줍니다.
리액트에서는 map을 이용해 데이터, 문자열 또는 객체 배열을 JSX 요소 배열로 매핑함.
웹에서는 스크롤이 디폴트지만 리액트 네이티브에서는 코드를 작성해야함.(스크롤뷰)
스크롤뷰에 목록이 많으면 리액트 네이티브에 내장된 FlatList를 사용함.(성능적으로 flatlist가 더 적합)
FlatList와 ScrollView 비교
FlatList는 React Native에서 사용되는 컴퍼넌트로, 스크롤 가능한 리스트를 구현하는 데 사용됩니다. FlatList는 ScrollView와 비교했을 때 몇 가지 중요한 차이점이 있습니다.
1.렌더링 효율성: ScrollView는 모든 아이템을 한 번에 렌더링하므로 많은 아이템이 있는 경우 성능 이슈가 발생할 수 있습니다. 반면에 FlatList는 화면에 보이는 부분만 렌더링하고, 스크롤되는 동안 필요한 아이템만 동적으로 렌더링합니다. 이는 대량의 데이터를 다룰 때 더 나은 성능을 제공합니다.
2.메모리 관리: ScrollView는 모든 아이템을 메모리에 유지합니다. 그러나 FlatList는 필요한 아이템만 렌더링하기 때문에 화면 밖으로 나간 아이템은 메모리에서 제거됩니다. 이는 메모리 사용량을 최적화하고 앱의 반응성을 향상시킵니다.
3.자동 스크롤 감지: FlatList는 스크롤을 자동으로 감지하여 리스트 아이템을 로드하거나 언로드하는 데 사용할 수 있는 "무한 스크롤"과 같은 기능을 제공합니다. 이를 통해 사용자 경험을 개선하고 더 많은 아이템을 처리할 수 있습니다.
4.키 추출: FlatList는 각 아이템의 고유한 키를 추출할 수 있는 keyExtractor prop을 제공합니다. 이를 통해 각 아이템에 대한 고유성을 보장하고 성능을 향상시킬 수 있습니다.
5.섹션 구분: FlatList는 섹션을 나눌 수 있는 기능을 제공합니다. 섹션 구분은 데이터를 그룹화하고 헤더와 푸터를 추가하는 등의 작업을 수행할 수 있습니다.
FlatList는 많은 데이터를 다루는 경우에 유용하며, 스크롤 가능한 리스트를 구현할 때 성능과 메모리 관리 측면에서 이점을 제공합니다.
