본문 바로가기

전체 글

 (99)
[React Native] axios를 사용하여 spring boot로 비동기 통신 하기 axios를 사용하기 전에 설치되어야 할 패키지 npm install axios Spring Boot로 작성된 컨트롤러가 다음과 같다면 @PostMapping("/login") public MemberDto login(MemberDto dto) { logger.info("MemberController login()"); return service.login(dto); } axios를 사용하기 위해 프론트엔드단에서 다음과 같이 사용한다. function login() { if (id.trim() === "") { Alert.alert("아이디 입력 확인", "아이디가 입력되지 않았습니다."); } else if (password.trim() === "") { Alert.alert("비밀번호 입력 확인", ..
Build Error ::: npm start 시 포트번호가 이미 사용중이라고 나온다면? error listen EADDRINUSE: address already in use :::8081. Error: listen EADDRINUSE: address already in use :::8081 at Server.setupListenHandle [as _listen2] (node:net:1331:16) at listenInCluster (node:net:1379:12) at Server.listen (node:net:1467:7) at /Users/.../node_modules/metro/src/index.js:164:16 at new Promise () at Object.exports.runServer (/Users/.../node_modules/metro/src/index.js:163:10)..
[React Native] 다른 화면으로 전환하기 다른 화면으로 넘어가는 것, 장면전환 예시이다. // App.tsx import React from "react"; import { NavigationContainer } from "@react-navigation/native"; import { createNativeStackNavigator } from "@react-navigation/native-stack"; import { View } from "react-native"; import DetailScreen from "./src/screens/DetailScreen"; import HomeScreen from "./src/screens/HomeScreen"; /* npm install react-native-gesture-handler npm i..
[React Native] ButtonNavBar 사용하기 하단에 메뉴바를 사용하기 위해 패키지 설치 및 gradle 의존성 추가가 필요하다(주석처리된 내용 참조). import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"; import { NavigationContainer } from "@react-navigation/native"; import React from "react"; import Icon from "react-native-vector-icons/Ionicons"; import BaseScreen from "./src/screens/BaseScreen"; import HomeScreen from "./src/screens/HomeScreen"; import SettingSc..
[React Native] useContext useContext는 장면전환시 값을 넘겨받기 위해 사용하며, 단독으로 사용할 수 없다. 이 때 createContext를 같이 사용해야 한다. // TextProvider.tsx import React, { createContext } from "react"; export const TextContext = createContext({}); interface Props { children: JSX.Element } export default function TextProvider({children}:Props) { const text = "전달하는 값"; return ( {children} ); } // CountProvider.tsx import React, { createContext, useSta..
[React Native] useMemo, useCallback useMemo 컴포넌트를 렌더링할 때 연산된 값을 재사용한다면 useMemo가 사용된다. import React, { useMemo, useState } from 'react'; import { Text, View, Button } from 'react-native'; // useMemo: 연산된 값을 렌더링할 때 재사용하는 경우에 씀. // useMemo(함수, [검사할 배열]) const square = (param:number) => { const testData = [ Array(10).keys ]; testData.forEach(() => { console.log(`계산중 ... 루프처리 ${testData.length}`); }); return param * par..
[React Native] useEffect useEffect useEffect는 클래스형 컴포넌트의 메서드인 componentDidMount와 componentDidUpdate를 합쳐서 사용하는 형태로 컴포넌트가 업데이트될 때마다 특정 작업을 실행하게 해주는 Hook이다. import React, { useEffect, useState } from "react"; import { Button, Text, View } from "react-native"; // useEffect: 컴포넌트가 렌더링 될 때마다 특정 작업을 실행하는 hook // componentDidMount + componentDidUpdate + componentWillUnmount function Welcome(props:any) { console.log("start"); us..
[React Native] 스타일 적용하기 1. 스타일 적용 기본 import React from "react"; import { StyleSheet, Text, View, Image, SafeAreaView } from "react-native"; const colorList = [ { color: '#00974A', val: '00974A' }, { color: '#2e6067', val: '2e6067' }, { color: '#a92127', val: 'a92127' }, { color: '#030364', val: '030364' }, { color: '#0d6729', val: '0d6729' }, { color: '#ff290b', val: 'ff290b' }, ]; export default function App() { retur..

티스토리툴바