728x90 ๋ฐ์ํ ๐ฑ Cross Platform/React Native25 [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. [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. ์ด์ 1 2 3 ๋ค์ 728x90 ๋ฐ์ํ