로메오의 블로그

React 목록 https://randomuser.me/documentation#pagination Api 더미 데이터는 위 사이트에서 가져옵니다. App.tsx import React from 'react'; import {SafeAreaView, StatusBar} from 'react-native'; import {Provider as ReduxProvider} from 'react-redux'; import UserList from './UserList'; import store from './store'; const App = () => { return ( ); }; export default App; store.ts import {combineReducers, configureStore} fr..

React 목록 설치 $ npm install @reduxjs/toolkit counter.ts $ mkdir src/redux $ touch src/redux/counter.ts import {createSlice} from '@reduxjs/toolkit'; import type {PayloadAction} from '@reduxjs/toolkit'; export interface CounterState { count: number; } const initialState: CounterState = { count: 0, }; export const counterSlice = createSlice({ name: 'counter', initialState, reducers: { increment: sta..

React 목록 프로젝트 생성 $ npx react-native init dragableList --template react-native-template-typescript React Native Reanimated 설치 $ npm install --save react-native-reanimated babel.config.js module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: ['react-native-reanimated/plugin'], }; plugins에 react-native-reaminated/plugin을 추가합니다. react-native-gesture-handler 설치 $ npm instal..

React 목록 App.tsx import React from 'react'; import {View, StyleSheet} from 'react-native'; import ChildScreen from './src/screens/ChildScreen'; const App = () => { const company = [ { country: 'Korea', company: 'Samsung', }, { country: 'USA', company: 'Apple', }, { country: 'Japan', company: 'Sony', }, ]; // 자식으로부터 호출됨 const onCalled = (param: string) => { console.log(param); }; return ( ); }; e..

React 목록 구글 Noto KR 폰트 다운로드 https://fonts.google.com/noto/specimen/Noto+Sans+KR Download family 로 폰트 다운로드합니다. StyleSheet에 적용 import { View, Text, StyleSheet } from 'react-native'; ... const HomeScreen = () => { ... return ( C ); }; export default HomeScreen; const styles = StyleSheet.create({ ... keypadNumber: { ... fontFamily: 'Noto Sans KR', }, ... }); font를 인지하지 못합니다. iOS 폰트 설정 $ mkdir src/io..

React 목록 모듈 설치 $ npm install redux $ npm install react-redux $ npm install redux-thunk 파일 생성 $ mkdir src $ mkdir src/redux $ mkdir src/screens $ touch src/redux/actions.tsx $ touch src/redux/reducer.tsx $ touch src/redux/store.tsx $ touch src/screen/HomeScreen.tsx $ touch src/screen/ChildScreen.tsx store.tsx import {legacy_createStore, combineReducers, applyMiddleware} from 'redux'; import thunk..

React 목록 import React, {useState} from 'react'; import {View, Text, StyleSheet, Button, ScrollView} from 'react-native'; interface State { name: string; } export default function App() { const [companies, setCompany] = useState([ {name: 'google'}, {name: 'samsung'}, {name: 'microsoft'}, {name: 'facebook'}, {name: 'apple'}, ]); const add = () => { const newCompany = {name: 'newCompany'}; setCompa..

React 목록 import React, {useState} from 'react'; import {View, Text, StyleSheet, Button} from 'react-native'; interface State { age: number; } export default function App() { const [count, setCount] = useState({age: 0}); const increase = () => { setCount({age: count.age + 1}); }; const descease = () => { setCount({age: count.age - 1}); }; return ( {count.age} ); } const styles = StyleSheet.create..