본문 바로가기

전체 글

[TIL-165] React Native ScrollView에서 아래로 당겨 새로고침하기 RefreshControl ScrollView에는 refreshControl이라는 prop이 있다. 공식문서 : https://reactnative.dev/docs/scrollview#refreshcontrol , https://reactnative.dev/docs/refreshcontrol [React Native] ScrollView Refresh Control https://velog.io/@beanzinu/React-Native-ScrollView-Refresh-Control https://enappd.com/blog/refreshcontrol-pull-to-refresh-in-react-native-apps/130/ 뒤로가기 새로고침 Refresh.. 더보기
[TIL-164] React Native React Native && 연산자 사용 시 변수를 문자열로 인식하는 에러 Error: Text strings must be rendered within a component. 잘 뜨던 화면이 렌더링되지 않고 에러가 났다. 내용은 문자열을 컴포넌트로 감싸야 렌더링할 수 있다는 것이다. {isInsufficient ? ( 송금가능금액이 부족해요. ) : point == 0 ? ( 송금가능금액이 없습니다. ) : null} {point && ( 송금가능금액: {parseInt(point - 500).toLocaleString('ko-KR')}원 ? 수수료는 500원이 부과돼요. )} 그런데 문제가 된 부분의 코드를 보면 당연하게도 문자열은 모두 컴포넌트로 감쌌기 때문에 잘못된 부분이 없었다. [React N.. 더보기
[TIL-163] React Native Redux dispatch 에러 Possible Unhandled Promise Rejection (id: 0): ReferenceError: setToken is not defined import React, {useState, useRef, useEffect} from 'react'; import {useDispatch, useSelector} from 'react-redux'; const PwVerify = ({navigation}) => { const token = useSelector(store => store.token); const dispatch = useDispatch(); ... // fetch하여 result에 담긴 token 받아옴 dispatch(setToken(result.acc.. 더보기
[TIL-162] 노마드코더 React Native #2.0~# 보호되어 있는 글입니다. 더보기
[TIL-161] React Native Redux 시작하기 파일 구조 및 기본 세팅 정석으로는 어떻게 하는지 모르겠지만 나는 src 폴더 하위에 redux 폴더를 만들었다. 이 폴더 안에 여러 state들을 각 파일로 만들어두고, index.js로 관리한다. index.js에서 redux로 관리할 전역 상태값들을 연결시켜준다. 루트 리듀서를 디폴트로 export 한다. // src.redux.index.js import {combineReducers} from 'redux'; import token from './token'; const rootReducer = combineReducers({ token, }); export default rootReducer; 모든 화면을 navigating하는 App.js에서 store를 주입한다. cre.. 더보기
[TIL-160] React Native TextInput 입력 완료 후 값 수정하기 onEndEditing // bankData.json { "1": { "bankName": "국민은행", "number": 14, "validation": { "regex": "/[0-9,-]{6,6}-[0-9,-]{2,2}-[0-9,-]{6,6}/", "hyphen": 2, "index": [6, 9] } }, "2": { "bankName": "기업은행", "number": 14, "validation": { "regex": "/[0-9,-]{3,3}-[0-9,-]{6,6}-[0-9,-]{2,2}-[0-9,-]{3,3}/", "hyphen": 3, "index": [3, 10, 13] } }, ... } const modifyAccout = () => { .. 더보기
[TIL-159] React Native 전역 상태 관리의 필요성 point와 카드 번호를 홈 화면과 송금 화면 두 스크린에서 필요한 상황이다. 지금은 각 화면에 도착했을 때, useEffect를 사용하여 컴포넌트가 최초 렌더링 된 직후에만 요청을 보내 두 가지 값을 받아왔다. 그런데 홈에서 송금 화면으로 스크린을 이동했을 때 그 사이 point 잔액이 바뀌어서 새로운 값을 받게 되었다. 이때 송금 화면에서 뒤로가기 버튼을 눌러 홈화면으로 넘어오면, "뒤로가기" 때문인지 화면이 새로고침되지 않아서 point와 카드번호를 받아오는 요청이 보내지지 않는다. 그래서 변경 전 point 잔액이 여전히 그려지는 문제가 있다. point를 전역 state로 관리함으로써, 요청을 보내서 값이 변경될 때마다 하나의 state에 저장하면 된다. 화면(컴포넌트).. 더보기
[TIL-158] React Native React Native에서 그라데이션 만들기 react-native-linear-gradient import LinearGradient from 'react-native-linear-gradient'; 해당 라이브러리를 설치하면 그라데이션도 가능하다. 색상만 지정해주면 기본적으로 상하 그라데이션이 나오는데, start와 end를 조절하여 그라데이션 각도를 바꿀 수 있다. RN(React Native) 프로젝트에서 react-native-linear-gradient을 사용해서 그라데이션(Gradient) 백그라운드(background)를 만들어 보자. https://dev-yakuza.posstree.com/ko/react-native/react-native-linear-gradient/ https://g.. 더보기

티스토리툴바