유미의 기록들

+, - 버튼을 눌렀을 때 판매개수 증가, 감소 구현하기 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 Native로 시작한다 React를 어느정도 해왔기 때문에 state, props, useState등을 알고 있어 접근이 더 쉬울 것이다 React Native 개발 방법에는 2가지가 있다 1) React Native CLI 2). Expo CLI React Native CLI의 개발 방법으로 한다면 실제 앱을 만드는 데 필요한 모든 소프트웨어가 필요하다 안드로이드 스튜디오 Java 안드로이드 SDK (Software Development Kit) 시뮬레이터 개발도구들 하지만 많은 사람들이 설치에서 문제가 발생한다. 그래서 설치 과정을 skip할 수 있도록 해주며, 바로 코드를 작성하고 폰으로 결과를 보게하는 tool이 있다 그것이 바로 Expo CLI이다 Application 구조 ..