개발조각

+버튼을 클릭하면 현재날짜의 데이터에서 운행정보를 기록할 수 있도록 달력에서 다른 날짜를 선택하면 선택한 날짜의 데이터로 기록 운행 정보 기록할 수 있도록 구현하기 그리고 기본 운행 정보 기록하기에서 카드, 현금, LPG 주입량, LPG 단가, 주행거리, 영업거리, 통행료를 입력하면 기본 운행 정보 기록하기에 기록한 값을 가지고 운행 정보를 출력하는 화면을 만들 예정입니다. (이건 아마 2부에서 설명할 것 같습니다.) 구현 화면 기록화면 생성하기, 수정하기를 같은 화면에 보여줄 예정입니다. (새로운 기록장 생성할때도 Record.tsx, 기존 기록장 수정할 때도 Record.tsx로 ) +버튼을 클릭하면 현재날짜의 데이터에서 운행정보를 기록 할 수 있도록, 달력에서 다른 날짜를 선택하면 선택한 날짜의 데..

이러한 화면을 구현하기 위해 react-native-calendars 라이브러리를 사용하게 되었습니다. 일단은 react-native-calendars를 사용했는데, 생각보다 제약이 많아서 나중에 직접 만들어볼까 합니다. (날짜 원래 위치로 되돌리기가 안돼서 계속 쓰긴 힘들 것 같아요.) 설치 npm i react-native-calendars 사용방법 import {Calendar} from 'react-native-calendars'; const CalendarView = () => { return( ) } 달력 영문을 한글로 수정하기 LocaleConfig를 이용해서 영문을 한글로 수정할 수 있습니다. 이를 통해 "1월~12월", "일~토"로 교체할 수 있습니다. import {Calendar, L..

이번에 프로젝트 작업을 하면서 useCallback을 사용하게 되었습니다. useCallback이란 useCallback hook은 메모이제이션된 콜백 함수를 생성하는 데 사용됩니다. 일반적으로 컴포넌트에서 함수를 정의할 때마다 해당 함수는 새로운 참조를 갖게 되고, 이는 매번 렌더링 될 때마다 새로운 함수가 생성하게 됩니다. 그러므로 이러한 함수 생성은 성능에 영향을 줄 수 있습니다. useCallback훅은 이러한 문제를 해결하기 위해 사용되며, useCallback으로 감싼 함수는 해당 ㅎ마수의 의존성 배열이 변경되지 않는 한 이전에 사용된 함수를 재사용합니다. 이는 동일한 함수를 여러번 생성하는 것을 방지하고 성능을 향상할 수 있습니다. 사용 예시 import React, { useCallback..

모달화면을 구현하는 방법에 대해 설명하겠습니다. 구현 방법 모달 화면을 열고 닫을 수 있게 state를 설정해 주어야 됩니다. const [modalVisible, setModalVisible] = useState(false); 버튼을 클릭하면 모달 화면이 나오게 버튼을 생성해 줍니다. 클릭 시 modalVisible을 true로 바꾸어주면, 클릭시 모달 화면이 나오게 됩니다. setModalVisible(true)} title={'모달 열기'} /> 클릭시 모달화면이 나오기 위해 모달 컴포넌트를 만들어줘야 됩니다. visible prop을 사용하여 모달이 열리거나 닫히도록 상태를 조절합니다. onRequestClose prop은 모달이 닫힐 때 호출될 콜백 함수를 정의합니다. 그래서 visible에다가..

day.js를 용해서 월별달력의 이전달 이동, 다음 달 이동, 현재달로 이동을 구현해 보도록 하겠습니다. 사용이유 day.js를 사용한 이유는 new Date를 쓰기 싫어서 입니다. new Date를 사용하면 년, 월, 일 구할 때 좀 귀찮아서 사용하기 편한 라이브러리를 사용했고, 이번 프로젝트는 기록장이다 보니 달력도 들어가고 그러다 보면 날짜를 제어해야 될 일이 많이 생겨서 날짜를 직관적으로 알기 편한 라이브러리 day.js를 사용하게 되었습니다. https://day.js.org/ Day.js · 2kB JavaScript date utility library 2kB JavaScript date utility library day.js.org 설치 npm install dayjs 사용 방법 사용방법..

react-navigation/native에서 useNavigation()을 통해 goBack()을 사용하면 뒤로 가기를 구현할 수 있습니다. 주요 코드 import {useNavigation} from '@react-navigation/native'; ... const navigation = useNavigation(); const onGoBackPress = () => { navigation.goBack(); }; 구현코드 // react, react-native import {TouchableOpacity, View} from 'react-native'; import {useNavigation} from '@react-navigation/native'; import {SvgXml} from 'rea..

사용 방법 import {useNavigation} from '@react-navigation/native'; const App = () => { const navigation = useNavigation(); const onNavigationPress = () => { navigation.navigate('Record'); }; return } 대신 Stack.Screen에 지정된 name이름을 넣어야 됩니다. 전체 코드 navigation/StackNavigator.tsx // react, react-native import {createNativeStackNavigator} from '@react-navigation/native-stack'; // components import BottomTabs..

이번에는 메인스크린을 스타일링해보도록 하겠습니다. 이전 포스팅을 보셨으면 알겠지만 스타일을 styled-components를 사용해서 스타일링했습니다. RN에서 styled-components 설치 방법에 대해 알고 싶다면 아래 링크를 클릭해 주세요! https://development-piece.tistory.com/438 [React-native CLI] styled-components 설치 및 세팅 리액트 네이티브에서도 styled-components가 사용가능하더라고요. 이전에는 가능할 줄 몰라서 안 쓰기도 했고, 요즘 다시 전통적인 css가 좋아서 썼는데 리액트 네이티브에서 css를 사용해보니 css보다 development-piece.tistory.com 그동안 styled-components..