유미의 기록들

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

Expo를 사용하면서 편리함을 느낄 수 있었지만 테스트, 공부 목적이 아닌 서비스 출시이므로 react native cli을 사용하는 것이 더 적합하다고 생각했다 1. node js 및 npm 패키지 관리자 설치 ✔️ 2. React Native CLI 설치 React Native · Learn once, write anywhere A framework for building native apps using React reactnative.dev Environment Setup -> React Native CLI Quickstart 여기에 설치 과정이 자세하게 나와있다 chocolatey를 통해 node, JDK설치 (windows 용 인기 패키지 관리자) choco install -y nodejs-It..

이제부터 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 구조 ..