YumeHANA YUME'S DEV

항상 프로젝트를 하면 라이브러리를 많이 사용하는데popup이나 modal같은 경우는 항상 직접만들게 된다.라이브러리를 사용하면 커스텀이 복잡하여 원하는 디자인으로 만들기가 어려워서 직접 만들게 된다.react native에서도 마찬가지로 직접 만들어 보았다. react native에서는 Modal컴포넌트가 있어서 좀 쉽게 구현이 되는데 이것저것하다가 Modal이 재대로 적용이 안되어서그냥 다른 방식으로 만들기로했다.Initializedportal은 portal로 감싼 자식들을 최상위로 보내준다.web으로 따지만 자식 컴포넌트이지만 최상위로 보내주는 것과 같다고 생각하면 된다. Modal 컴포넌트도 portal처럼 작동하지만 뭔가 꼬여버린지 잘 안되어서 portal을 그대로 사용했다.npm install ..

이전에 bottom tabs을 했다가 bottom tabs을 빼고 진행하기로 결정.이후 버튼을 누르면 페이지 이동이 필요하여 stack navigation을 사용Initializednative-stack 패키지를 설치npm install react-native-screens @react-navigation/native-stackStack Navigation사용방법은 이전 bottom-tabs와 비슷했다.각 페이지별로 option에 애니메이션 진행 방향을 설정해서 뒤로가기나 이동이 자연스럽게 이루어지도록 설정첫 페이지는 home 페이지로 설정 App.tsx자체에서 만들어도 되지만,App.tsx에는 나중에 provider나 이것저것 추가하게 되면 지저분해보일까봐 navigation을 따로 만들었다.impor..

web에서는 localstorage가 존재해서 사용자를 기준으로 저장하는게 아니라면 localStorage를 활용하여 간단한 데이터를 저장할 수 있다. react native도 마찬가지로 asyncStoage가 존재하며 여기에 localStorage처럼 key, value형태로 저장이 가능하다.앱 테마 설정경우 이를 활용해서 저장하면 편하게 관리할 수 있기때문에AsyncStorage를 활용하여 데이터를 저장 Initializedasync-storage 패키지를 설치npm install @react-native-async-storage/async-storageUseage설정한 테마를 저장할 것이므로 테마 값 관리 같은 경우는 아래 글을 참고https://yumedev.tistory.com/90 [ Reac..

앱을 만들면서 항상 테마 설정을 하는데 react native의 테마 설정하는 방법을 찾아보는데 대부분이 hook을 이용해서 구현하는 방법들이 대부분 이었다. 근데 이러면 내가 원하는 곳에 원하는 색을 넣을려면 해당 컴포넌트에서 결국 hook을 사용해야하기때문에컴포넌트에서 계속 hook을 불러와서 쓰는 불편함을 없애고 싶어서 다른 방법으로 구현해보았다. Initialized우선 hook을 사용하지 않고 할려고 해도 상태관리는 해야하기때문에 zustand를 이용npm install zustandZustandzustand에서 theme 값과 변경 함수를 정의 theme의 타입은 아래처럼 select에서 선택해서 설정할 수 있게 할 것이므로 해당 key값을 가져와서 타입 정의export const select..

앱개발을 하면 하단의 네비게이션이 거의 필수이기에bottom-tabs 패키지를 사용하여 bottom navigation기능을 구현Initializedbottom-tabs를 사용할때는 react-native-screens를 같이 설치해줘야한다.그렇지 않으면 계속 react native에서 해당 스크린을 찾을 수 없다고 계속 에러가 발생하게 된다. npm install react-native-screens @react-navigation/bottom-tabsUseage우선 전역으로 bottom navigation을 적용할 것이므로 app.tsx 파일에 NavigationContainer를 만들어준다.import { SafeAreaProvider,} from 'react-native-safe-area-con..

react native에서 svg icon을 사용하기 위해 svgIcon component를 생성Initialized우선 svg icon을 사용하기 위해서 react-native-svg 패키지를 설치해준다.npm install react-native-svg 이후 타입스크립트를 사용하기때문에 types > svg.d.ts파일을 생성// svg.d.tsdeclare module "*.svg" { import React from 'react'; import { SvgProps } from 'react-native-svg'; const content: React.FC; export default content;} tsconfig.json에서 types폴더를 include해줘 svg 타입을 ..