Programming/React Native
-
- [React Native] 클릭 시, 리플 효과(Ripple Effect) 주는 방법
클릭 시, 리플 효과(Ripple Effect) 주는 방법들어가며리액트 네이티브(React Native)에서 요소 클릭 시, 리플 효과(Ripple Effect)를 줄 수 있는 방법을 정리해본다. 방법우선 특정 요소에 클릭 이벤트를 넣기 위해서는 @Pressable@ 컴포넌트로 해당 요소를 감싸줘야 한다.import { View, Text, Pressable } from 'react-native';function MyComponent(props) { return ( {/* 클릭 효과를 넣을 요소를 감싸준다. */} {props.text} );} Android OS@Pressable@ 컴포넌트에 @android_ripple@ 속성을 추가하여 요소 클릭..
1 2024.12.11 -
- [React Native] FlatList
FlatList들어가며리액트 네이티브(React Native)의 @FlatList@ 컴포넌트에 대해 정리해본다. FlatList개념효율적으로 대량의 스크롤 가능한 항목을 렌더링하기 위해 사용되는 컴포넌트최적화된 가상 스크롤링 기능을 제공하여 성능 문제를 줄이고, 스크롤 시 필요한 항목만 렌더링한다.@ScrollView@ 컴포넌트와의 차이점 주요 속성속성설명@data@- 렌더링할 데이터 배열(Array)을 전달- 배열의 각 요소는 렌더링될 항목의 데이터@renderItem@- 데이터를 어떻게 렌더링할지 정의하는 함수- 매개변수로 @{ item, index }@ 형태의 객체를 받는다.@keyExtractor@- 각 항목의 고유 키를 반환하는 함수- 기본적으로 @item.key@ 또는 @item.id@를 사용..
2024.12.10 -
- [React Native] Expo Go 앱에서 Expo 프로젝트 연결 안되는 문제 해결 방법 (There was a problem running the requested app)
Expo Go 앱에서 Expo 프로젝트 연결 안되는 문제 해결 방법 (There was a problem running the requested app)들어가며Expo Go 앱에서 PC에서 생성한 Expo 프로젝트를 연결할 때, 아래와 같은 오류가 발생할 때 해결하는 방법을 정리해본다. 방법① 동일한 네트워크에 연결되어 있는지 확인하기PC와 Expo Go 앱이 설치된 모바일 장치가 모두 동일한 네트워크(와이파이)에 접속되어 있는지 확인한다. ② 제어판에서 NodeJS 관련 기능 설정하기[제어판] > [시스템 보안] > [Windows Defender 방화벽] > [허용되는 앱]에서 @NodeJS JavaScript Runtime@ 항목의 @[개인]@, @[공용]@을 모두 체크해준다.
2024.11.26 -
- [React Native] Expo CLI vs. React Native CLI
Expo CLI vs. React Native CLI들어가며리액트 네이티브(React Native) 프로젝트 생성 방법으로 Expo CLI 와 React Native CLI 방법 2가지가 있다.이 두 방법의 차이점을 간단하게 정리해본다. Expo CLI개념리액트 네이티브로 앱을 개발할 때 사용되는 도구프로젝트 생성, 관리, 실행을 간단하게 해주는 명령줄 인터페이스(Command Line Interface)리액트 네이티브 프로젝트를 생성할 때 기본적으로 권장되는 접근 방식 새 프로젝트 생성하기$ npx create-expo-app@latest # 새 프로젝트 생성 주요 특징기본 템플릿을 제공하여 초기 설정 없이 바로 앱 개발 시작 가능카메라, 위치 정보, 푸시 알림 등 네이티브 기능을 쉽게 사용할 ..
2024.11.25