본문 바로가기

App/React Native6

[React Native] SQLite 사용하기 앱 종료 후 재시작에도 저장된 데이터가 유지 될 수 있도록 데이터를 DB에 넣어 관리하자외부 DB를 사용 할 수도 있지만, 메모 & 버킷 리스트 데이터는 아무리 많이 생성해도상대적으로 데이터가 적을 것이라고 생각되서 관리는 SQLite 를 사용해도 충분해 보인다. 1. 패키지 설치네이티브 환경에서 운영할 수도 있지만, expo 에서도 어느 정도 SQLite 기능을 지원하며지원하는 기능들은 구현하고자 하는 모든 범위를 커버할 수 있어서 아래 패키지를 설치했다.npm install expo-sqlite 2. 테이블 생성 함수 작성먼저 데이터 베이스 입출력을 담당할 클래스를 생성하고 db가 될 파일 이름을 지정한다.class DbManager { constructor() { this.db = SQLit.. 2024. 11. 20.
[React Native] 원 그래프 그리기 특정 메모의 완료 개수 / 전체 개수 를 시각적으로 표현하기 위해원 그래프를 사용한다. 이를 위해 다양한 라이브러리가 존재하지만, 비교적 간단한 그래프를 구할 예정이므로 react-native-circular-progress를 사용한다. 1. 패키지 설치컴포넌트 사용을 위해 아래 패키지를 설치한다.npm install react-native-circular-progress react-native-svg 2. 코드 구현 {(fil) => ( 버킷 리스트 - 할일 // 원 그래프 내부 텍스트 )}코드를 구현한 후 화면을 확인하면, 아래와 같이 구현된 것을 확인 할 수 있다.그래프으 시작 지점은 3시 방향인 것으로 확인된다.일반적으로 원형 그래프를 구현할 때, 진행률 시작 지점은 12시로 인식하고.. 2024. 11. 18.
[React Native] 데이터 그래프처럼 꾸미기 데이터를 그래프로 표현해야 하는 작업이 생겼는데막상 그래프 관련 라이브러리를 가져와서 표현해보면 여러 제약 사항 때문에 마음에 들게 표현이 되지 않았다.표형해야 하는 그래프는 단순히 바 형태의 차트이므로 그래프 라이브러리 없이 직접 구현해보려고 했다. 1. 최초 코드const data = { '일': 6 , '월': 10, '화': 13, '수': 8, '목': 19, '금': 22, '토': 7};const maxHeight = Math.max(...Object.values(data)); { Object.keys(data).map((item) => ( {data[item]} {item} )) }그래프로 표현할  View 영역 .. 2024. 11. 16.
[Ract Native] 네비게이션 바 설정하기 1. 패키지 설치 및 폴더 구조네비게이션 바를 사용하기 위해 아래 두 패키지를 설치한다.npm install @react-navigation/native @react-navigation/bottom-tabs 아래와 같이 폴더 구조를 설정한 후 기존에 작업하던 파일을 Screens 폴더 아래 MemoScreen.js로 옮겼다./src ├── /assets # 이미지, 폰트 등 에셋 파일 ├── /components # 재사용 가능한 UI 컴포넌트들 ├── /navigation │ ├── TabNavigator.js # 탭 네비게이션 ├── /screens │ ├── Me.. 2024. 11. 14.
[React Native] 메모 상태 수정, 필터 기능 구현하기 1. 테스트 데이터 준비하기재실행 할 때 마다 데이터가 초기화 되어 매번 입력하고 확인하는 것을 방지하기 위해 초기에는 몇 개의  데이터를 세팅한다.export default function App() { const [memos, setMemos] = useState([{"id": 1, "date": "2024-11-13", "memo": "앱 만들기", "status": false}, {"id": 2, "date": "2024-11-13", "memo": "더 많은 앱 만들기", "status": false}, {"id": 3, "date": "2024-11-12", ".. 2024. 11. 13.
[React Native] 달력 추가하기 1. 설치리엑트 네이티브 달력을 구현하기 위해 아래 라이브러리를 import 한다.npm install react-native-calendars 2. 기본 뷰 구현그 후, Calendar 컴포넌트를 호출한 후 아래와 같이 작성한다.import { StyleSheet, View } from 'react-native';import { Calendar } from 'react-native-calendars';export default function App() { return ( );}const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', align.. 2024. 11. 13.

티스토리툴바