나아가는중

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..

React Native react-native-sound API SoundPlayer 사용 React Native 앱 개발을 하면서 음악 재생 기능을 사용하는 경우가 생기는데요, react-native-sound API을 사용해서 SoundPlayer를 만들어 보겠습니다. 자세한 설명은 아래 링크를 참조하시면 더 많은 기능과 사용법을 아실 수 있습니다. www.npmjs.com/package/react-native-sound react-native-sound React Native module for playing sound clips on iOS, Android, and Windows www.npmjs.com 저는 기본적인 음악 재생과 멈춤 정도만 보여드리겠습니다. React Native functio..

React Native React Navigation - Stack Navigation 화면 전환 지난번 포스트에서 React Navigation중에서 Stack Navigation을 등록하는 방법에 대해 설명드렸습니다, 이번에는 Stack Navigation간 화면 전환 방법에 대해 설명드리겠습니다. 우선 사용하실 스크린(Screen)들을 NavigationContainer > Stack.Navigator 안에 등록해주셔야 합니다. 저는 따로 screens 폴더를 만들어 그곳에 screen으로 사용할 js파일을 등록해주었기 때문에 import로 가져와서 사용해주었습니다, React functional component hooks 를 사용한 방법입니다, App.js import { NavigationCo..

React Native React Navigation - Stack Navigation React Native 앱 개발에서 필수라고 할 수 있는 React Navigation 화면 전환 기능을 사용해 보겠습니다. React Navigation 아래 여러 종류의 Navigation이 있는데, 그 중 Stack Navigation입니다. React Navigation 설치 npm install @react-navigation/native React Native 프로젝트 폴더 터미널에서 위와 같이 입력을 해주시고요 Dependencies도 같이 설치 해주셔야 합니다. npm install react-native-reanimated react-native-gesture-handler react-native-sc..

React Native react-native-vector-icons 사용법 및 문제해결 React Native 개발을 하다보면 아이콘을 사용해야 할 일이 당연히 생기게 되는데요, 이번에 icon 사용방법에 대해 설명드리겠습니다, icon을 사용하려고 구글 검색을 하면 react-native-vector-icons가 가장 먼저 나타나게 되는데요, npm에서 react-native-vector-icons를 확인해 보면 주에 20만명이 넘을 정도로 많이 사용을 하고 있습니다. 자 이제 npm에 나와 있는 설명대로 설치를 진행해 볼 텐데요, 이 방법만으로 icon 사용이 가능해지는 것은 아닙니다. 실제로 사용할려고 하면 문제가 생기더라고요. 우선 npm 명령어를 사용하여 설치를 진행해 줍니다. npm inst..

React Native TextInput 키보드(keyboard) 안나타날 때 dosen't apper React Native 공부하고 있는 초보입니다. TextInput을 만들고 테스트하는데, 키보드가 안나타나서 당황했는데, 제가 찾은 해결방법을 공유해드리려고 합니다. 분명 위의 화면처럼 TextInput에 커서도 가있고, 키보드로 입력하는건 정상으로 작동이 되는데, ios simulator 내에 키보드가 안뜨더라고요 command(cmd) + k 를 해주시면 소프트웨어 키보드가 나타납니다. command(cmd) + shift + k 를 하드웨어 키보드에서 소프트웨어 키보드로 기본 설정이 변경됩니다. IOS simulator 상단의 탭에서 I/O 에서 keyboard를 보시면 현재 상태를 확인 및 변..

React Native 스토리북(Storybook) 스크린(Screen) 띄우기 앞서 React Native 프론트 개발을 컴포넌트들을 스토리북(Storybook)에 추가하는 방식들을 설명 드렸습니다. 스토리북을 사용해서 React Native 프로젝트를 실행하면 Storybook이 자동으로 실행되어 생성한 컴포넌트(component) 들만 확인이 가능했어습니다. 스토리북에서 컴포넌트들을 추가했으면 이제 스크린에 컴포넌트들을 띄워 앱을 만드는 방법을 해보겠습니다. 제가하는 방식이 정답이 아닐 수도 있고 맞을 수도 있는데, 제가 사용하는 방법을 보여드리겠습니다. 따라하시면 간편하게 화면(screen)을 띄울 수 있습니다. Storybook을 설치하고 실행할때에 프로젝트에 있던 App.js를 삭제해주었었습니..