유미의 기록들

상품등록 Page에서 사진 등록하는 부분을 5개로 제한을 주려고 한다 상품등록 Page 부분 ✔️ 갤러리로 이동하면서 배열크기 전달 🚫 이미지 배열크기가 5이면 경고창 뜨기 and 갤러리로 이동할 수 없음 // 갤러리로 이동 goGallerySreen=()=>{ if(this.state.imageURLs.length==5) { alert('이미지는 최대 5장까지 선택할 수 있어요'); } else { this.props.navigation.navigate('Stack',{screen:"Gallery", params:{imageLength:this.state.imageURLs.length}}); } } 갤러리 Page 부분 ✔️ 상품등록에서 받은 imageLength값을 state값 변수로 넣어주기 thi..

Stack과 Tab을 함께 사용하는 것을 구현해보았다 여기서 Drawer Navigation을 추가할 것이다 Drawer 내비게이션 ✅ Drawer 내비게이션 라이브러리 설치 npm install @react-navigation/drawer ✅ 추가 라이브러리 설치 npm install react-native-gesture-handler react-native-reanimated ❔ React Native 개발을 하다가 reanimated 에러가 발생하는 경우가 있다. 다른 라이브러리와 충돌하면서 생기는 것인데 Reanimated가 왜 필요할까 React Native에서 JS Thread가 처리해야할 작업의 양이 많아서 UI에 비해 JS Thread의 작업이 빈번하게 지연되는 문제가 발생한다 Reanim..

상품등록screen → 갤러리screen → 카메라screen으로 push했을 때는 componentDidMount()가 실행이 되었다 하지만, 카메라screen → 상품등록screen으로 goBack했을 때 카메라screen에서 받아온 데이터를 상품등록screen의 state에 넣어줄 것을 예상했지만 constructor, componentDidMount()가 아예 실행이 되지 않았다 즉, 재렌더링이 이루어지지 않고 있다는 느낌을 받았다 리액트 네이게이션 공식문서를 보면 네이게이션 라이프 사이클이라는 것이 있었다 https://reactnavigation.org/docs/navigation-lifecycle https://reactnavigation.org/docs/navigation-lifecycle..

카메라에서 찍은 이미지들을 등록버튼을 눌렀을 때, 상품등록 페이지로 여러장을 한번에 나오도록 하기 1. 상품등록 화면에서 이미지들을 보여줄 때 카메라 화면과 의존적이기 때문에 라우트 파라미터로 값을 전달한다 2. 이미지를 여러장 보여줘야 하므로 FlatList컴포넌트를 사용해서 보여준다 🔎 Flat List vs Scroll View 많은 양의 스크롤이 필요한 리스트 아이템을 보여줄 때 FlatList나 ScrollView 컴포넌트를 사용한다 ScrollView는 데이터가 화면 밖에 있을 때 단순히 스크롤을 생성해서 벗어난 부분을 고정적으로 볼 수 있게 해주는 목적이 다. 따라서 출력해야 하는 데이터가 많지 않을 때 간단하게 사용하는 편이다 FlatList도 마찬가지로 스크롤을 생성하지만, 화면에 보여지..

이번에는 카메라를 구현해보도록하겠습니다 ✅ 비전카메라 라이브러리 설치 npm install react-native-vision-camera": "^2.14.1 ✅ android > app > src > main > AndroidManifest.xml 에 추가 적용하기 import { Camera } from 'react-native-vision-camera'; class VisionCameraView extends Component { constructor(props) { super(props); this.camera = React.createRef(); this.devices = []; this.state = { imageInputValue:[], imageURLs: [], device: null, m..

React Native는 콤보박스 컴포넌트를 제공해주지 않는다 따라서 라이브러리를 따로 설치해야 한다 ❓ 왜 많은 APIs와 Components가 ReactNative에서 제공하지 않는 걸까? ✔️ 초기에 ReactNative팀은 사람들에게 가능한 많은 APIs와 Components를 제공하고 싶었다 하지만, 그렇게 할 수 없다는 것과 정말 많은 버그가 있다는 것을 깨달았으며, 유지관리와 업데이트가 어려워서 모든 Components를 지원하는 게 어렵다고 생각했다 따라서 Components, API를 줄이고 가장 중요한 기능만 남았다고 볼 수 있다 처음에 구글링을 하면서 하다보니 react-native-dropdown , react-native-material-dropdown 등 오만가지 라이브러리를 설..

+, - 버튼을 눌렀을 때 판매개수 증가, 감소 구현하기 React에서 프로젝트를 했을 때 이를 구현해본 적이 있다. ReactNative에도 똑같이 적용해보았다 먼저, state 값에 itemCount를 변수로 두고, 초기값을 1로 두었다 React와 마찬가지로 state는 값이 변경될 때 마다 컴포넌트가 다시 렌더링되기 때문에 동적인 데이터를 다룰 때 사용된다 class PutGoods extends Component{ constructor(props){ super(props); this.state={ itemCount:1, } } } +,- 버튼을 클릭했을 때 state변수 itemCount이 1씩 증가하거나 감소해야 한다 따라서 버튼 onPress에서 setState를 사용해 함수를 구현해준다 +..

본격적으로 프로젝트를 진행하면서 저는 UI개발을 담당하였다 ReactNative는 리액트 기반으로 동작하지만 네이티브개발이기 때문에 HTML, CSS를 사용할 수 없다 UI 개발을 위한 방법으로 대표적으로 2가지가 있다 기본적으로 RN에서 제공하는 StyleSheet를 이용해서 스타일링을 하거나 Styled-Component를 사용하는 방법이 있다 StyleSheet StyleSheet의 장점은 아주 좋은 자동완성 기능을 제공하며, 스타일 component를 정리하는 데 유용하다. 아직 시작하는 단계 이므로 StyleSheet로 먼저 사용해보도록 하겠다 일단 저는 page별로 쓰이는 스타일과 공통적으로 쓰이는 스타일을 따로 두어서 중복코드 사용을 줄이고 가독성을 높이고자 하였다 상품등록 페이지 구현하기 ..

버튼을 클릭했을 때 화면 이동해보기 화면 간 전환을 도와주는 라이브러리가 React Navigation이다 React Native는 더 이상 navigation을 제공하지 않는다 따라서 우리가 직접 라이브러리를 설치해야 한다 ✅ 리액트 내비게이션 라이브러리 설치 npm install @react-navigation/native npm install react-native-screens react-native-safe-area-context 내비게이션의 종류에는 Stack 내비게이션, Tab 내비게이션, Drawer 내비게이션이 있다 Stack 내비게이션 ✅ stack 내비게이션 라이브러리 설치 npm install @react-navigation/native-stack App.js import React..

브라우저에서 React 어플리케이션을 만들 수 있게 해주는 온라인 코드에디터입니다 -> 아이패트로 코딩하거나 vsCode, node.js를 다운받을 수 없는 환경일 때 활용하기 좋습니다 https://snack.expo.dev/ Snack - React Native in the browser Write code in Expo's online editor and instantly use it on your phone. snack.expo.dev The Rules of Native 1. React Native는 웹사이트가 아니다 HTML이 아니기 때문에 div는 쓸 수 없다 → 대신에 View 가 있다 view는 container이다 니가 만들 모든 것은 view로 만들게 될 것 항상 import해야함 im..