본문 바로가기

728x90

React Native24

[React Native] React Hook Form 사용해 보기 (Using React Hook Form) 안녕하세요 Foma 입니다! 저번 시간에 Form을 만들어 해당 Screen에 정보를 전달하는 방법에 대해 정리해 보았는데요. (해당 코드를 기반으로 진행되니 아직 안보신 분들은 여기 에서 보고와 주세요!) 간단하고 더 효율적으로 Form을 만들 수 있는 라이브러리가 있어 사용해 보고 글을 정리하려고 합니다! 바로 시작할게요~! 언어는 TypeScript, 환경은 Expo로 진행 하겠습니다! React Hook Form이란? React Hook Form은 Form을 사용 하기 쉽게 만든 라이브러리입니다. 공식 홈페이지에선 한 줄로 "유용하고 확장 가능하며 사용하기 쉬운 고성능 폼 검증 라이브러리" 라고 소개합니다. 장점은 아래와 같습니다. 더 자세한 내용을 알고 싶다면 공식 홈페이지로 가서 확인해 보시길.. 2022. 6. 22.

[React Native] Form Component 만들어 Screen에 적용해 보기(Apply Form Component to Screen) 안녕하세요 Foma 입니다! React Native에서 Form을 만들어 해당 Screen에 정보를 전달하는 방법에 대해 정리해 보도록 하겠습니다. 바로 시작할게요~! 언어는 TypeScript, 환경은 Expo로 진행 하겠습니다! AddPersonForm.tsx 먼저 사람을 추가하는 Form을 만들어 보겠습니다. PersonFormType Form에 들어갈 프로퍼티들을 정의해 줍니다. export type PersonForm = { name: string; age: string; gender: string; }; PersonProps Form의 프로퍼티의 type을 정의해 줍니다. 제출 하였을 때 PersonForm을 파라미터로 받는 함수를 만들어 주겠습니다. type PersonFormProps = .. 2022. 6. 22.

[React Native] 재사용 가능한 Custom Modal 만들기 (feat. Reusable Custom Modal) 안녕하세요 Foma 입니다. 저번 글에 Modal에 대해서 알아 보았는데요. (안보신 분은 여기 에서 봐주세요!) 오늘은 재사용 가능한 커스텀 Modal을 만들어 보는 방법에 대해서 알아 보겠습니다. 바로 시작할게요~ Modal.tsx 가장 먼저 필요한 컴포넌트들을 import 해줍니다. Modal을 import할 땐 커스텀 하는 Component Modal과 이름이 겹치므로 as를 이용해서 DefaultModal로 바꿔줍니다. import { FunctionComponent, useState } from "react"; import { StyleSheet, View, Modal as DefaultModal, Button } from "react-native"; Modal Props 모달의 속성들을 정합.. 2022. 6. 21.

[React Native] Modal component의 거의 모든 것 (Almost Everything in Modal) 안녕하세요 Foma 입니다! 요즘 React Native의 modal을 디테일하게 정리해 보려고 합니다. 바로 시작할게요~! Modal이란? Modal의 사전적 의미가 궁금해서 찾아 봤더니 의미를 알 수 없는.. 뜻이 나오더라구요. 그래서 구글링을 통해서 더 자세히 찾아봤더니 이 분이 잘 정리를 해놓으셨더라구요. GNUJAVA 제목없음 jQuery UI 1.6 - The User Interface Library for jQuery (Feb 2009), Dan Wellman Chapter 4. Dialog modal, modality? 이게 무슨 뜻일까? ‘modal’ , ‘modality’ 이 단어, 참 뜻이 묘연하다. 도저히 사전적 의미를 가지 www.gnujava.com 간단히 말해 드리면 modal.. 2022. 6. 21.

[React Native] Hooks를 사용해야 하는 이유 (feat. useState,useEffect) 안녕하세요 Foma 입니다! 요즘 React Native를 공부하는데 useState,useEffect가 정말 많이 보이더라구요. 이게 뭔지 그리고 왜 사용해야 하는지 정확히 알고자 이 글을 정리했습니다. 바로 시작할게요~ 언어는 TypeScript, 환경은 Expo로 진행 하겠습니다! Hooks Hooks에 대해 정말 정말 간단하게 설명해 드릴게요. (왜냐하면 useState,useEffect가 모두Hooks이기 떄문이죠.) 기존의 React Native에선 상태 관리와 라이프 사이클을 관리하기 위해서 Class 형태로 코드를 작성해야 했습니다. 이와 같이 Class로 작성하게 되면 코드를 재사용 하기가 힘들고, 라이프 사이클 메서드가 추가 되면서 쓸 데 없이 코드가 길어지는 문제가 있었습니다. 바로 .. 2022. 6. 18.

[React Native] AsyncStorage 사용해 디바이스에 데이터 저장하기(Store data on a device using AsyncStorage) 안녕하세요 Foma 입니다! 오늘은 저번 시간에 다뤘던 List 화면 을 기반으로 AsyncStorage를 이용하여 데이터를 저장하고 받아오는 것을 구현해 보겠습니다. 바로 시작할게요~ 언어는 TypeScript, 환경은 Expo로 진행 하겠습니다! AsyncStorage란? 암호화 되지 않은 비동기적인 데이터를 관리하는 Key-Value 저장 시스템입니다. 앱 전역에서 사용할 수 있으며, LocalStorage 대신 사용해야 합니다. Deprecated? React Native 공식 문서에 Deprecated 라고 되어 있어 '더 이상 사용하지 않는건가..?' 하고 구글링을 해봤더니 원래는 React Native 자체에서 아래와 같이 라이브러리를 지원했는데요. 이제는 자체 지원을 중단하고 communi.. 2022. 6. 18.

[React Native] 화면 간 데이터 이동하기 (Passing data between screen) 안녕하세요 Foma 입니다! 오늘은 저번 시간에 다뤘던 List 화면 에 이어서 특정 컴포넌트를 클릭 했을 때 다음 화면으로 이동하고, 데이터를 함께 전달하는 방법에 대해서 다뤄보겠습니다. 바로 시작할게요~ 언어는 TypeScript, 환경은 Expo로 진행 하겠습니다! Person List Person 데이터를 가진 컴포넌트를 리스트로 만들어 줍니다. (리스트 화면은 여기 를 참고해 주세요!) Pressable 컴포넌트를 눌렀을 떄 PersonDetatil 화면으로 이동하게 만들어 줍니다. (Navigation에 대한 것은 여기를 여기 참고해 주세요) 그리고 함꼐 보낼 데이터를 { 이름1: 보낼 데이터1, 이름2: 보낼 데이터2...} 와 같은 형식으로 작성해 줍니다. PersonListScreen.t.. 2022. 6. 18.

[React Native] Text에 Custom Font 적용하기 안녕하세요 Foma 입니다! 오늘은 React Native에서 Custom Font를 다운 받아 적용하는 방법에 대해서 알아 보겠습니다. 바로 시작할게요~ 언어는 TypeScript, 환경은 Expo로 진행 하겠습니다! Download Font 아래 Google Font로 이동해 줍니다. Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 원하는 폰트를 고른 뒤 Download family 버튼을 눌러 맘에 드는 폰트를 다운로드 받아 줍니다. .zip파일을 압축 해제한 뒤 assets에 fonts 폴더를 만들어 주고 해당 .ttf 파일을 넣어줍니다. Use Cached Reso.. 2022. 6. 17.

[React Native] List에 Component 적용하기 (feat. FlatList,Pressable) 안녕하세요 Foma 입니다! 오늘은 React Native에서 Component를 만들어 List에 적용해 보는 것을 정리해 보려고 합니다. (iOS로 말하면 TableView를 만들어 Cell을 적용하는 것과 비슷하더라구요.) 바로 시작할게요~ 언어는 TypeScript, 환경은 Expo로 진행 하겠습니다! Model Person.ts 데이터를 띄울 모델을 만들어 줍니다. export interface Person { name: string; age: number; gender: string; } Component List에 띄울 컴포넌트를 만들어 줍니다. 컴포넌트 이름을 PersonCell로 만들어 주겠습니다. (iOS 스타일로...ㅎ) 해당 컴포넌트의 아이템을 Person으로 지정해 주고 각 프로퍼.. 2022. 6. 17.

[React Native] Bottom-Tab 만들어 화면 이동하기 (Bottom-tab-navigator) 안녕하세요 Foma 입니다! 이번엔 저번 Navigation을 이용하여 스크린 이동하기 글에 이어서 Bottom-tab을 만들어 화면을 이동하는 방법에 대해 알아보겠습니다. (해당 코드 기반으로 진행되기 때문에 혹시 안보신 분들은 보고 와주세요!) 바로 시작할게요~ 언어는 TypeScript, 환경은 Expo로 진행 하겠습니다! Install Bottom-tabs npm install @react-navigation/bottom-tabs Vector-icons npm install @expo/vector-icons index.tsx import 바텀 탭을 만드는데 필요한 모듈을 import 해줍니다. import { createNativeStackNavigator } from "@react-navigat.. 2022. 6. 16.

[React Native] Navigation으로 화면 이동하기 (Navigation Between Screens) 안녕하세요 Foma 입니다! 오늘은 리액트 네이티브에서 네비게이션을 사용하여 스크린을 이동하는 방법에 대해 알아보도록 하겠습니다. 바로 시작할게요~ 언어는 TypeScript, 환경은 Expo로 진행 하겠습니다! Install Native npm install @react-navigation/native @react-navigation/native Native-stack npm install @react-navigation/native @react-navigation/native-stack Safe-area-context expo install react-native-screens react-native-safe-area-context Navigation Initial Setting App.tsx 초기 .. 2022. 6. 16.

[React Native] Expo란? (feat. 설치하는 방법) 안녕하세요 Foma💻 입니다. 본격적으로 리액트 네이티브 공부를 시작했는데요. 그 중 초보자가 입문하기 쉬운 Expo에 대해서 알아보고 설치하는 방법에 대해 정리하려고 합니다. 바로 시작할게요~ React native를 개발할 수 있는 방법은 크게 두 가지가 있습니다. 1. React-Native-CLI React-Native-CLI는 어떠한 툴을 사용하지 않고 오로지 React natvie만을 이용해서 개발하는 방식입니다. 이것은 초기에 설정이 까다롭고, Android Studio, Xcode 등으로 각 플랫폼마다 설치하고 빌드해야 하는 단점이 있지만 개발자 원하는 기능이나 라이브러리들을 자유롭게 제어 가능한 장점이 있습니다. 2. Expo-CLI Expo-CLI는 초기에 설정이 간단하고, 개발을 쉽게.. 2022. 2. 16.

이전 1 2 다음

728x90

티스토리툴바