본문 바로가기
반응형

React-Native12

[React-Native + TypeScript] Stack Navigation, 스택 네비게이션 사용법 ⚡ react-native의 네비게이션 화면에서 navigation을 이용하여 다른 화면으로 이동하곤 합니다. react web에서는 말 그대로 URL을 통한 페이지 → 페이지 의 이동이었다면 앱에서는 스크린 간 이동이 아닌 자료구조의 스택과 같이 스크린을 쌓아갑니다. 스택 네비게이터는 화면 간 전환 및 탐색 기록을 관리할 수 있는 방법을 제공합니다. 이 뿐만 아니라 네이티브 어플에서 사용하던 일부 제스처와 애니메이션도 제공해 유용하게 사용할 수 있습니다. 그럼 약간은 복잡한 StackNavigation 설정 방법을 알아보겠습니다. 📌 라이브러리 설치 // 다음과 같은 환경에서 실행했습니다. "react": "18.2.0", "react-native": "0.71.8", 리액트 네이티브의 스택 네비게이션.. 2023. 7. 18.
React Native 장단점과 CLI, Expo 비교와 후기 📒 React-Native 장단점📌 장점🔎 생산성JS로 안드로이드와 IOS 어플을 동시에 제작할 수 있습니다.🔎 CodePush를 통한 배포원하는 기능의 배포를 아무 때나 스토어를 거치지 않고 할 수 있습니다.네이티브 코드에 변동이 있을 땐 CodePush를 사용하진 못하고 스토어 업데이트를 이용해야 합니다.🔎 쉽고 빠른 UI 작성JavaScript와 리액트만 잘 알고 있다면 모바일 UI를 쉽고 빠르게 작성할 수 있습니다 📌 단점🔎 자주 실패하는 앱 구동, 너무 오래 걸리는 Build Time리액트 네이티브 프로젝트 개발 후, 시뮬레이터 또는 개발용 기기로 개발 모드를 구동을 할 때 대부분의 경우엔 문제없이 잘 작동하지만 브랜치를 변경하여 네이티브 코드에 변동 사항이 발생하거나 하면, 간혹가.. 2023. 7. 13.
[React-Native] styled-components, Unknown property: 'elevation' ts-styled-plugin(9999) 경고 제거 ⚡️Warning, Unknown property ‘…’ ts-styled-plugin(9999) 리액트 네이티브의 styled-components 라이브러리를 이용해 열심히 컴포넌트를 만들고 있는데 알 수 없는 요소라고 경고가 계속 발생했습니다. 작동은 잘 되지만 거슬리는건 못참기 때문에 좀 찾아보니 TypeScript에서 react-native만 가지고 있는 CSS 속성을 인식하지 못해 발생하는 문제였습니다. 📌 삽질 리액트 네이티브 관련 글들은 죄다 오래됐는데 그마저도 버전이 조금만 다르면 작동을 아예 안한다는 것에 질려버렸습니다. 이 문제 또한 돌고 돌아 해결했지만 23년에 RN 개발 시작하시는 분들을 위해 삽질한 것도 글에 포함해 봅니다. 🔎 지난 버전 라이브러리 $ npm install -D .. 2023. 6. 20.
반응형

오픈 채팅