나아가는중

React Native Stopwatch - Functional Component Hooks 구현 React Native 앱 개발 stopwatch component 구현 예제(example)를 보여드리겠습니다. 별도의 API는 사용하지 않으며 React의 useRef를 사용하여 구현한 방법입니다. Functional Component방법을 사용하여 구현하였습니다. StopWatch.js import React, { useState, useRef } from 'react'; import { StyleSheet, Text, View } from 'react-native'; import { TouchableOpacity } from 'react-native-gesture-handler'; const Stop..

React Native react-native-stopwatch-timer API를 사용한 stopwatch 구현 React Native 앱 개발 중 스탑워치를 API를 사용해서 구현하는 것을 알려드립니다. npm에서 제공하는 기본 코드는 class component 형식을 사용하고 있는데요, 요즘 방식인 hooks functional component 방식으로 변경해서 사용하는 방법을 보여드리겠습니다. 우선 아래 코드를 입력해서 react-native-stopwatch-timer를 설치해 줍니다. npm install react-native-stopwatch-timer 이 API는 시간초가 증가하는 stopwatch랑 timer 두 가지를 제공하는데요, 저는 stopwatch만 사용해서 하는 방법을 보..

React Native Header - Functional Component Hooks React Native 앱 개발 중에 본인이 원하는 custom header bar 가 필요한 경우가 있습니다. 그럴 경우에 사용할 custom header bar를 만들어 보겠습니다. React Navigation을 사용하면 자동으로 header bar가 생성되게 됩니다. 우선 기본으로 제공해주는 header bar를 먼저 제거해줍니다. 방법을 모르시는 분은 아래 링크를 참조해주세요. dlee0129.tistory.com/15 [React Native] Navigation Option no Header 헤더 없애기, 제거 React Native Navigation Option no HeaderBar 헤더 없애기, 제..

React Native Modal Functional Component Hooks Modal은 특정 이벤트가 실행되었을 때, 화면 상단에 표시되는 창으로, 화면 전체를 다 가리지 않고 일부만 가리는 것이라고 생각하시면 됩니다. 사용자의 응답(reponse)를 요구하며 확인, 예/아니오 등의 응답을 요구합니다. 응답이 있기 전까지 화면에서 사라지지 않으며 응답을 받으면 사라지는 동작입니다. Modal은 React Native에 기본으로 포함되어 있는 기능이기도 합니다만, 별도로 react-native-modal을 설치해서도 사용을 합니다. 저는 React Native에 기본으로 내장되어 있는 modal을 가지고 보여드리겠습니다. 두 파일로 분활하여 구현하였습니다. AppModalContainer.js im..

React Native에서 Hooks를 사용하여 Text component를 만들기 React Native 개발을 class component 형식에서 functional component 형식으로 점점 추세가 바뀌고 있습니다. 검색을 해도 class component로 만든 예제가 거의 대부분이라서 제가 직접 글을 써봅니다... component화를 시키면 재사용성이나 유지보수 등의 장점이 있습니다. 기본적인 Text도 앱에서 공통으로 사용될 Text component를 만들어 사용하면 나중에 쉽게 유지보수 등이 가능해 질텐데요, 이번에 그래서 Text를 hooks를 사용한 fuctional component로 만들어 보았습니다. AppText.js import React from 'react'; im..

React Native Navigation Option no HeaderBar 헤더 없애기, 제거 React Native 앱 개발을 하시다가 상단의 HeaderBar를 제거하는 방법을 알려드리겠습니다. 실행환경은 MacBook Pro M1 이며, Visual Studio Code를 사용하였습니다. React Native Functional Component Hooks 방식으로 코딩하였습니다. 처음에 React Navigation을 이용하시면 기본으로 화면 이름이 HeaderBar에 타이틀로 생성이 됩니다. App.js import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@re..

React Native GlobalStyles 전역적, 공통적 스타일 React Native 앱 개발 특히 프론트엔드(Front end) 개발을 하다 보면 페이지 레이아웃(style), 색상(color), 높이(height), 넓이(weight) 등 공통적으로 사용하게 되는 style들이 많이 존재하게 됩니다. 매번 javascript(js)파일에서 style을 지정해주는 것도 너무 번거롭고 합니다. 공통으로 즉 전역적으로 사용할 스타일(style) 혹은 속성을 따로 만들어서 불러와 사용하면 좀 더 편하고 효과적으로 개발을 하실 수 있게 됩니다. 저는 config 폴더를 만들고 그안에 globalStyles.js 파일을 만들어 주었습니다. globalStyles.js export const screenS..