으니의 개발로그

[React Native] DelayInput(react-native-debounce-input) 에서 value 값 전체 삭제하기 지연된 입력을 렌더링 하는 DelayInput 을 사용하면서 value 값을 전체삭제 하는 버튼을 만들려고 했다. react-native 에 있는 TextInput 과 같이 setValue("") 를 해줬더니 value 값은 공백이 되지만 input 창 안에 있는 텍스트들은 안 없어진다! input 창 안에 있는 값들도 초기화해주기 위해서는 inputRef.current.clear() 활동이 추가적으로 필요하다. 추가해주면 다음과 같이 초기화가 아주 잘 된다! 예시코드 import React, {useState, createRef} from 'react'; import De..

[React Native] TextInput multiline 일 때 텍스트 상단에 정렬하기 (안드로이드) React Native 에서 TextInput 컴포넌트를 사용할 때 한 줄이 아닌 여러줄을 사용할 때가 있다. 그럴 때 props에multiline={true} 를 쓰고 style에 가로 세로를 지정해주면 된다. 그러고 나서 결과물을 봤더니 iOS에서는 텍스트가 상단에서부터 시작하는데 Android에서는 텍스트가 중앙에 배치된다. 이를 통일해주기 위해서 사용하는 것이 textAlignVertical 이다. style에 textAlignVertical="top" 만 추가해주면 된다. 그러면 이렇게 안드로이드에서도 텍스트를 상단에 정렬시켜줄수 있다 코드 예시 import React from 'react..

[React Native] React Navigation 스택 초기화하기 React Native 프로젝트에서 React Navigation 중 Stack Navigation 을 사용하면 스택이 계속 쌓인다. 이 때 스택을 초기화 해야하는 경우가 있다. 대표적으로 step을 밟으면서 회원가입을 할 경우! 회원가입이 끝나고 난 뒤에도 뒤로가기를 했을때 회원가입 중인 페이지를 안 보이게 하려면 스택을 초기화해야한다. 초기화 해주는 방법은 쉽다. navigate 대신 reset 을 사용하면 된다. navigation.reset({routes: [{name: "welcome", params: { email, password }}]}) name 옆에는 지정해준 컴포넌트 이름, params 에는 다음 페이지로 보내줄..

[React Native] 공식 문서 보고 Mac OS에서 개발 환경 설정하기 공식 문서는 아래 링크를 클릭해서 보면 된다. https://reactnative.dev/docs/environment-setup Setting up the development environment · React Native This page will help you install and build your first React Native app. reactnative.dev React Native 개발 환경을 설정하는 방법으로는 두 가지 방법이 있다. Expo CLI 를 사용하는 방법 React Native CLI 를 사용하는 방법 여기서는 React Native CLI 를 이용해서 개발 환경을 만들 것이다. React ..

MAC OS 환경에서 React Native 개발 환경 구축 중 발생하는 에러 해결하기 React Native CLI 를 이용해서 개발을 시작하고 싶은데 중간에 에러가 발생했다. error Error: Failed to install CocoaPods dependencies for iOS project, which is required by this template. Please try again manually: "cd ./AwesomeProject/ios && pod install". CocoaPods documentation: https://cocoapods.org/ 그래서 메뉴얼대로 terminal 창에서 cd ./AwesomeProject/ios && pod install 를 쳤더니 Analyz..