본문 바로가기

728x90

React Native24

[React Native] 스와이프 하면 삭제 버튼 나오는 컴포넌트 구현하기 (Swipeable Component with delete button) 안녕하세요 Foma 입니다. 오늘은 React-Native에서 컴포넌트를 스와이프 했을 때 삭제 버튼이 나오는 기능을 정리해 보려고 합니다. 바로 시작할게요~ Preview Install npm install --save react-native-gesture-handler Screen.tsx import {Swipeable, GestureHandlerRootView} from 'react-native-gesture-handler'; 오른쪽에 들어갈 Delete 버튼을 만들어 줍니다. dragX를 받아와 애니메이션을 적용하고, id에 List의 index를 받아와 버튼을 눌렀을 때 해당 index를 출력해 보겠습니다. const renderRightActions = (dragX, index) => { co.. 2022. 8. 18.

[React Native] RTK-Query 파라미터에 맞게 특정 데이터만 불러오기(Get specific data by parameter using RTK-query) 안녕하세요 Foma 입니다. 오늘은 RTK-Query에서 파라미터에 맞게 원하는 특정 데이터를 불러오는 방법에 대해 알아보려고 합니다. 많은 삽질을 하고 결국 해결법을 알아내게 되어 글로 정리하려고 합니다. 바로 시작할게요~ 1. 첫 번째 시도 우선 제가 하려 했던건 유저를 이름으로 조회해서 데이터를 가져오는 것이었는데요. 아래와 같이 쿼리를 통해서 엔드포인트를 만들었습니다. export const userAPISlice = createApi({ reducerPath: 'userAPI', baseQuery: fetchBaseQuery({baseUrl: 'http://192.168.111.34:3001/api'}), endpoints: builder => ({ ... getUserByName: builde.. 2022. 8. 12.

[React Native] useNavigation와 useRoute 이용해서 화면 이동하고 데이터 전달하기 (Move and Pass data between two screens using Hooks) 안녕하세요 Foma 입니다. 평소에 리액트 네이티브에서 navigation을 props로 전달하는 게 너무 불편했는데요. 오늘은 React-Native에서 navigation을 props로 전달하는 것이 아닌, useNavigation과 useRoute를 만들어 줘서 화면을 이동과 함께 데이터를 전달하고 받아보도록 하겠습니다. 바로 시작할게요~ Install npm install @react-navigation/native npm install @react-navigation/native-stack npm install @react-navigation/stack npm install react-native-safe-area-context Navigation Navigation/index.ts 기존 Pro.. 2022. 8. 12.

[React Native] ChatApp Socket.io Room 적용하기 (feat. TypeScript) 안녕하세요 Foma 입니다. 저번 글에서 Node.js에서 Socket.io를 이용하여 Room을 만들어 보았는데요. (혹시 안보신 분들은 여기 에서 확인해 주세요!) 오늘은 백엔드 서버에서 온 데이터를 프론트에 적용해 보는 과정을 정리해 보려고 합니다. 바로 시작할게요~ Preview Install npm install @react-navigation/native npm install @react-navigation/native-stack npm install react-native-screens npm install react-native-safe-area-context npm install socket.io-client ScreenEnums 스크린 종류를 Enum으로 만들어 놓습니다. export .. 2022. 8. 10.

[React Native] RTK-Query로 서버와 통신하기 (feat. Typescript) Install redux-toolkit npm install @reduxjs/toolkit TodoModel interface TodoModel { id: number; title: string; content: string; } Create API Slice createApi와 fetchBaseQuery를 import 해줍니다. import {createApi, fetchBaseQuery} from '@reduxjs/toolkit/query/react'; 저는 TodoList를 기반으로 아래와 같이 만들어 주겠습니다. reducerPath: 스토어의 reducer로 지정할 Path의 이름 baseQuery: 기본으로 지정할 서버 URL tagTypes: 자동으로 데이터가 패치되게 구별할 타입 endpo.. 2022. 8. 6.

[React Native] Redux를 이용해 Counter 앱 만들어 보기 (feat. Typescript) 안녕하세요 Foma 입니다! 이전 글에서 Redux에 대해 다뤘는데요. 오늘은 그 Redux를 이용해 간단한 Counter 앱을 만들어 보려고 합니다. 바로 시작할게요~ (환경은 React Natvie CLI, Typescript로 진행하겠습니다.) Preview Install Typescript Project Init npx react-native init "프로젝트 이름" --template react-native-template-typescript redux npm install redux react-redux npm install react-redux @types/react-native npm install @types/react-native Counter 가장 먼저 카운터 인터페이스를 만들어 줍.. 2022. 8. 4.

[React Native] Redux란? (feat. Flux) Redux란? Javascript 어플리케이션에서 상태 관리를 도와주는 라이브러리 입니다. 여기서 "상태?는 바뀌는 어떤 값들을 의미하는데요. 예를 들면 계산기에서 어떤 버튼들을 누르면 계산한 값이 계속해 달라지죠? 바로 계산한 값이 => 계산한 결과를 나타내는 상태인 것 입니다. Flux란? Redux는 Facebook의 Flux 디자인 패턴에서 유래된 것인데요. Flux는 Web 어플리케이션을 MVC 패턴으로 구현할 때 발생하는 문제들을 해결하고자 만들어 졌습니다. 그렇다면 어떠한 문제들이 발생했을까요? 기존 MVC는 아래와 같이 Model과 View가 양방향으로 데이터를 주고 받았습니다. 하지만 앱이 커지면 커질수록 Model과 View의 양방향 소통이 늘어났고, 이것은 데이터의 변경 사항을 빠르게.. 2022. 8. 3.

[React Native] 실시간 채팅앱 만들어보기 2 - Websocket 이용하여 프론트 구현하기 (Build a real-time chatapp 1 - Implement frontend with websocket) 안녕하세요 Foma 입니다. 지난 글에 Node.js로 웹소켓 서버를 구현했는데요. 오늘은 React Native에서 해당 서버를 이용하여 실시간으로 채팅을 주고받는 기능을 구현해 보도록 하겠습니다. 바로 시작할게요~ (환경은 React Native CLI + Typescript 입니다.) Tutorial 실시간 채팅앱 만들어보기 1 - Websocket 이용하여 백엔드 구현하기 (feat. Websocket) (Build a real-time chatapp 1 - Implement backend with websocket) 실시간 채팅앱 만들어보기 2 - Websocket 이용하여 프론트 구현하기 (Build a real-time chatapp 1 - Implement frontend with webs.. 2022. 7. 28.

[React Native] React Native + Node.js + MySQL To do list 만들기 5 - Axios 이용하여 CRUD 구현하기 (Implementing a api with Axios) 안녕하세요 Foma 입니다. 이번 글은 React Native + Node.js + MySQL 튜토리얼의 마지막 단계인 Axios를 활용하여 CRUD를 구현해 실제 서버에 API를 요청하고 데이터베이스에서 데이터를 받아오고, 생성하고, 수정하고 ,삭제하는 방법에 대해 정리하도록 하겠습니다. 바로 시작할게요~ Tutorial React Native + Node.js + MySQL To do list 만들기 1 - 서버 초기 세팅하기 (Initialize server setting) React Native + Node.js + MySQL To do list 만들기 2 - MySQL 테이블 만들기 (Create a MySQL Table) React Native + Node.js + MySQL To do lis.. 2022. 7. 27.

[React Native] React Native + Node.js + MySQL To do list 만들기 3 - React Native 화면 구현하기 (Implement frontend) 안녕하세요 Foma 입니다! 오늘은 React Native + CLI + TS로 투 두 리스트 화면을 구현하는 방법에 대해 정리해 보도록 하겠습니다. 바로 시작할게요~ Tutorial React Native + Node.js + MySQL To do list 만들기 1 - 서버 초기 세팅하기 (Initialize server setting) React Native + Node.js + MySQL To do list 만들기 2 - MySQL 테이블 만들기 (Create a MySQL Table) React Native + Node.js + MySQL To do list 만들기 3 - React Native 화면 구현하기 (Implement frontend) React Native + Node.js + My.. 2022. 7. 26.

[React Native] 함수형 컴포넌트 props 데이터에 따라 업데이트 해주기(Functional Component update on props change) 안녕하세요 Foma 입니다. 오늘은 함수형 컴포넌트에서 props가 바뀔 때마다 화면이 업데이트 되도록 하는 기능을 구현해 보도록 하겠습니다. 바로 시작할게요~ Problem 아래와 같이 추가 버튼을 누르거나 수정 버튼이 눌리면 폼 형식의 모달이 뜨도록 구현 했습니다. 위 과정에서 수정 버튼을 눌렀을 땐 해당 버튼이 눌린 데이터 모델의 값이 인풋 안에 미리 작성돼도록 하고, 추가 버튼이 눌렸을 땐 빈 인풋창이 보이도록 구현하고 싶었습니다. 왼쪽이 추가(+) 버튼을 눌렀을 때, 오른쪽이 수정버튼을 눌렀을 때입니다. TodoList.tsx 위 리스트 화면에서 useState를 구현해 줍니다. const [todos, setTodos] = useState(todoDatas); const [todo, setTo.. 2022. 7. 26.

[React Native] TextInput과 Object를 useState로 바인딩 하는 법 (Binding a textinput with object) 안녕하세요 Foma 입니다. 오늘은 TextInput 값에 따라 Object의 특정 프로퍼티 값이 바뀌는 것을 useState를 이용하여 구현하는 방법에 대해 정리해 보려고 합니다. 바로 시작할게요~ To do list Todolist의 모델인 TodoModel이 있습니다. interface TodoModel { id: number; author: string; title: string; content: string; priority: number; } 해당 Form의 인풋값에 따라 해당하는 TodoModel의 프로퍼티가 바뀌는 것을 구현하고 싶었는데요. 1. useState를 통해 TodoModel을 초기화 해줍니다. const [todo, setTodo] = useState({ author: '', .. 2022. 7. 26.

이전 1 2 다음

728x90

티스토리툴바