본문 바로가기

App25

[React Native] 아이템 주문목록에 담기 React Native 103 - 주문로직 장바구니에 있는 아이템은 '바로주문' 버튼을 누르면 '주문목록' 에 담긴다. 장바구니 아이템들을 그대로 주문목록에 담아주면 된다. 리듀서와 액션을 만들어보자. actions/orders.js export const ADD_ORDER = 'ADD_ORDER'; export const addOrder = (cartItems, totalAmount) => { return { type: ADD_ORDER, orderData: { items: cartItems, amount: totalAmount } }; }; CartScreen 컴포넌트에서 데이터를 전달받은 액션함수는 items, amount 를 리듀서로 전달한다. reduc.. 2020. 12. 7.
[React Native] 장바구니 삭제기능 구현 아이템 삭제로직 장바구니 안에 담긴 아이템을 삭제하는 것을 만들어 보고자 한다. cart 라는 액션과 리듀서를 통해 REMOVE_FROM_CART 의 액션이 주어지면 state 의 아이템을 제거하는 로직을 세워본다. 진행 순서는 다음과 같다. 장바구니에 들어가서 아이템 삭제버튼을 누른다. → useDispatch 함수에서 액션함수 REMOVE_FROM_CART 를 호출한다. 아이템 수량이 1개있으면 아이템을 삭제한다. → reducer 에서 해결한다. 2개이상 있으면 수량을 하나 줄인다. → reducer 에서 해결한다. 전체금액(totalAmount)도 같이 변경해준다. → reducer 에서 해결한다. CartScreen에서 삭제시 호출함수 설정 const dispatch = useDispatch().. 2020. 12. 6.
[React Native] 헤더버튼 React Native - 헤더버튼 헤더버튼 import { HeaderButtons, Item } from 'react-navigation-header-buttons'; import HeaderButton from '../../components/UI/HeaderButton'; ... const ProductOverviewScreen = (props) => { } ProductOverviewScreen.navigationOptions = (navData) => { return { headerTitle: '포도마켓', headerRight: () => ( { navData.navigation.navigate('Cart'); }} /> ) }; };.. 2020. 11. 30.
[React Native] Redux 사용 create, update, delete Shop App 005 OrderItem 컴포넌트 생성, 스타일링 components/shop/orderItem.js import React from 'react'; import { View, Text, Button, StyleSheet } from 'react-native'; import CartItem from './CartItem'; import Colors from '../../constants/Colors'; const OrderItem = (props) => { return ( ${props.amount.toFixed(2)} {props.date} ); }; const styles = StyleSheet.create({ orderItem.. 2020. 7. 7.
[React Native] DrawerNavigator, StackNavigator Shop App 004 Delete Items 추가하기 **store/actions/cart.js** export const ADD_TO_CART = 'ADD_TO_CART'; export const REMOVE_FROM_CART = 'REMOVE_FROM_CART'; export const addToCart = (product) => { return { type: ADD_TO_CART, product: product }; }; export const removeFromCart = (productId) => { return { type: REMOVE_FROM_CART, pid: productId }; }; 장바구니에서 아이템을 지우는 액션함수를 하나 생성합니다. `removeFromCart` **stor.. 2020. 7. 6.
[React Native] Redux(Reducer, Actions) Shop App - 003 상품들을 장바구니에 추가하기 새로운 리듀서와, 액션함수를 생성합니다. 먼저 액션을 만들어봅시다. store/actions/cart.js export const ADD_TO_CART = 'ADD_TO_CART'; export const addToCart = (product) => { return { type: ADD_TO_CART, product: product }; }; 나중에 dispatch 함수에서 액션을 호출할 때 사용하게 될 ADD_TO_CART 변수를 정의하고, 이를 addToCart라는 액션함수에 type으로 넣어줍니다. 이 액션함수의 인풋은 상품인 product입니다. store/reducer/cart.js import { ADD_TO_CART } f.. 2020. 7. 5.
[React Native] Touchable Component Shop App 002 1 상품 아이템 컴포넌트 저번 시간에는 상품 개요를 보여주는 ProductOverviewScreen 화면에서, FlatList를 통해 상품 데이터 하나하나를 리스트형태로 보여주었었습니다. 오늘은 위 리스트에 담기는 하나의 상품 컴포넌트를 따로 제작해봅시다. 하나의 양식이 있고, 이것을 반복하는 형식이 있다면, 컴포넌트 객체로 따로 만드는 것이 좋습니다. components/shop/ProductItem.js import React from 'react'; import { View, Text, Image, StyleSheet, Button } from 'react-native'; import Colors from '../../constants/Co.. 2020. 7. 5.
[React Native] redux, navigation 세팅 Shop App 001 쇼핑몰 앱을 만들어봅니다. 1 계획 1) product overview screen : image, title, cart, detail button 2) cart detail screen 3) product detail screen 4) Navigation : shop, orders, manage products orders mange products : plus button → edit product screen 2 생성, Setup Create $ expo init wordmall Setup $ npm install --save react-native react-native-screens $ npm install --save redux react-redux react-navig.. 2020. 7. 5.
[React Native] Setup, Redux, Navigation 세팅 Shop App 001 1 계획 1) product overview screen : image, title, cart, detail button 2) cart detail screen 3) product detail screen 4) Navigation : shop, orders, manage products orders mange products : plus button → edit product screen 2 생성, Setup Create $ expo init wordmall Setup $ npm install --save react-native react-native-screens $ npm install --save redux react-redux react-navigation react-nav.. 2020. 6. 19.
[React Native] Expo 없이 앱 build하기 지금은 Expo에 의존하여 빌드, 모듈, 배포를 했습니다. 하지만, 더 이상 Expo에 의존하지 않으려 합니다. 또한 앱이 규모가 커지면, 다른 배포 도구가 필요합니다. 대안 Expo는 워크플로우를 관리합니다. 세팅할 것이 하나도 없고, 사용하기 편리하고, 많은 네이티브 모듈이 빌트인 되어있습니다. Expo CLI로 제어가 가능하고, Standalone app(Expo가 필요없는)이 배포가 가능합니다. 즉, 안드로이드 스튜디오나 XCode가 기술적으로 필요하지 않습니다. Expo - Bare Workflow React Natvie CLI None-Expo App None-Expo App 여전히 엑스포 패키지 불러옴 Expo 패키지 이용가능, 매뉴얼 설정 필요 설정, 관리 쉬움 자신의 것을 관리 아무 네이.. 2020. 6. 11.
728x90

티스토리툴바