도각도각 필기노트

TIL 22.08.29 현재 프로젝트에서 무한스크롤을 구현해야하는 기능이 있다. 홈 스크린 상단에는 배너, 검색바, 리스트 필터링하는 버튼들이 있고, 그 아래에 무한스크롤로 구현된 리스트를 렌더링 해야 한다. 지난 TIL에서 우선 FlatList와 ScrollView의 차이점부터 알아보았다. 서칭해보니 무한스크롤 기능을 위해서는 대부분 FlatList를 사용함을 알 수 있었다. 왜냐하면 FlatList의 onEndReached prop가 리스트 하단에 스크롤이 머문 것을 인식하고 그에 따른 이벤트를 불러올 수 있기 때문이다. 하지만 ScrollView에는 이러한 prop가 없다. 처음에는 홈 스크린 전체는 ScrollView로 두고, 내부 리스트를 렌더링하는 부분은 FlatList를 쓰면 되겠다고 생각했..

TIL 22.08.28 ScrollView와 FlatList의 차이점을 알아보자 ScrollView https://reactnative.dev/docs/scrollview ScrollView · React Native Component that wraps platform ScrollView while providing integration with touch locking "responder" system. reactnative.dev ScrollView renders all its react child components at once, but this has a performance downside 공식문서에 나와있다시피 ScrollView는 화면 상관없이 모든 요소를 한번에 렌더링하기 때문에 성능 ..

TIL 8/23 https://reactnavigation.org/docs/getting-started https://reactnavigation.org/docs/getting-started/ reactnavigation.org npm install @react-navigation/native npm install react-native-screens react-native-safe-area-context 공식문서에 따라 필요한 패키지와 라이브러리를 설치해준다. App.js import * as React from 'react'; import { NavigationContainer } from '@react-navigation/native'; export default function App() { re..

설치 OS : macOS Monterey 12.5 node : v16.16.0 npm : 8.11.0 watchman : 2022.08.15.00 xcode : 13.4.1 cocoapod : 1.11.3 react-native : 8.0.6 openjdk14 javac : 14.0.2 내 핸드폰 기종이 iPhone이라 Xcode를 이용하여 React Native 개발 환경 구축을 진행하였다. 더보기 [MAC M1] React Native 개발 환경 구축 및 에러 해결 Homebrew Homebrew : https://brew.sh/ Homebrew 사이트에서 설치한 후 터미널에서 위의 명령어를 통해 설치 및 버전을 확인합니다. 정상적으로 설치되었다면 다음과 같이 버전을 확인할 수 있습니다. ![](ht..

TouchableOpacity TouchableOpacity - Expo Documentation Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React. docs.expo.dev Press Here TouchableOpacity 태그로 감싼 컴포넌트를 터치할 경우 해당 컴포넌트가 잠시 투명도를 갖게 된다. onPress 외에도 onPressIn, onPressOut, onLongPress 속성을 추가할 수 있다. activeOpacity={0.6} 투명도를 설정할 수 있다. TouchableHighlight TouchableHighlight -..

Component - 화면에 렌더링되는 것 - return () 내에 태그 형태로 작성됨 API - 운영체제와 소통 - JS 코드로 작성됨 더보기 기본 App.js 코드 import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View } from 'react-native'; export default function App() { return ( Hello world! ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, text : { fo..

React Native 작동 원리 React Native 앱 = 그림의 모든 structure + JS 코드(Javascript, Markup/Styling) = Bridge를 통해서 JS 코드가 운영체제와 통신을 할 수 있도록 하는 infra structure React Native = 인터페이스 : JS 코드(Javascript, Markup/Styling)와 운영체제(iOS, 안드로이드) 사이에 있는 인터페이스 React Native는 bridge를 통해 JS 코드를 운영체제에 전달해준다. 이런 면에서 React Native는 shell과 유사하다. 상세 작동방식 1. Event 2. Collect data and notify iOS, Andriod가 발생하는 이벤트들 수집 (ex. 화면 클릭) 3..