[React Native] npx react-native start --reset-cache 오류 해결 방법

실행문npx react-native start --reset-cache   오류 메세지error: unknown command 'start'  해결 방법이 오류는 명렁어를 실행할 때 react native 앱의 루트 디렉터리에 있지 않은 경우 발생할 수 있습니다.만약 앱 이름이 "App"인 경우 npx react-native start를 실행하기 전에 cd App을 수행하여 루트 디렉터리로 이동하면 해결 가능할 수 있습니다.

• format_list_bulleted React
• · 2024. 6. 26.
• textsms

[React Native] EADDRINUSE: address already in use :::8081 포트 오류 해결 방법

npm start 명령어로 개발한 리액트 앱을 실행하려는 중 'EADDRINUSE: address already in use :::8081' 오류 메세지가 나타났습니다.   오류 메세지info Welcome to React Native v0.74 info Starting dev server on port 8081... error listen EADDRINUSE: address already in use :::8081. 이 오류는 포트 8081 즉 해당 포트가 이미 사용 중임을 의미합니다.이는 이전에 실행 중인 개발 서버가 아직 종료되지 않았거나, 다른 프로세스가 해당 포트를 사용 중일 때 발생합니다.이 문제를 해결하기 위해 다음과 같은 방법을 시도할 수 있습니다.  1. 기존 서버 중지먼저, 현재 포트 ..

• format_list_bulleted React
• · 2024. 6. 25.
• textsms

[ReactNative] Text strings must be rendered within a text component 오류 해결 방법

실행 코드오류가 발생한 코드는 다음과 같습니다.function RootNavigator() { const isLoggedIn = true; return {isLoggedIn ? : };}  오류 메세지코드를 실행한 결과 'Text strings must be rendered within a text component'라는 오류 메세지가 나타났습니다.Error: Text strings must be rendered within a component 오류는 React Native에서 문자열을 렌더링할 때 문자열이 컴포넌트 내에 포함되지 않은 경우 발생합니다. React Native에서는 문자열을 직접 렌더링할 수 없으며, 모든 텍스트는 컴포넌트 내에 포함되어야 합니다.  오류 원인오류의 원인은 ..

• format_list_bulleted React
• · 2024. 6. 23.
• textsms

[ReactNative] TextInput 입력한 첫 글자 대문자 자동변경 막는 방법

autoCapitalize​ autoCapitalize​는 특정 문자가 자동으로 대문자로 표시되도록 TextInput에 지시합니다. 이 속성은 name-phone-pad와 같은 일부 키보드 유형에서 지원되지 않습니다. characters : 모든 문자 words : 각 단어의 첫 글자 sentences : 각 문장의 첫 글자(기본값) none : 아무 것도 자동으로 대문자로 표시하지 않습니다. 만약 TextInput에 입력한 첫글자가 대문자로 자동 변경되는 걸 막고 싶다면 autoCapitalize 속성에 'none'을 입력하면 됩니다. autoCapitalize="none" 예시 다음은 autoCapitalize가 'none'으로 설정된 React Native의 TextInput 컴포넌트를 만든 간단한..

• format_list_bulleted React
• · 2023. 4. 23.
• textsms

[ReactNative] 입력 칸 만들기 - TextInput

MyInput 컴포넌트 만들기 리액트 네이티브에서는 TextInput 컴포넌트를 사용하여 사용자가 입력한 텍스트를 전달받을 수 있습니다. 다음은 TextInput 컴포넌트를 사용하는 방법의 예입니다. import React, { useState } from 'react'; import { View, TextInput, StyleSheet } from 'react-native'; const MyInput = () => { const [text, setText] = useState(''); const onChangeText = (inputText) => { setText(inputText); }; return ( ); }; const styles = StyleSheet.create({ container: {..

• format_list_bulleted React
• · 2023. 4. 22.
• textsms

CDN 사용해 React 설치하기

개발용 리액트를 사용하기위해 두개의 자바스크립트 코드 react와 react-dom을 import 해야 합니다. 아래는 개발용 CDN을 통해 react와 react-dom을 import 한 예시이며 import한 스크립트들은 개발용으로 적합한 버전입니다. 배포용 React의 용량 및 성능 최적화된 배포용 CDN 버전을 아래와 같이 import 합니다. 작성일 기준 최신버전인 18버전으로 작성했습니다. react와 react-dom의 특정 버전을 로딩하려면 18을 사용하고자 하는 버전으로 대체하면 됩니다. 이후 최신버전은 https://ko.reactjs.org/docs/cdn-links.html에서 참고하시기 바랍니다. Reference https://ko.reactjs.org/docs/cdn-links..

• format_list_bulleted React
• · 2023. 4. 20.
• textsms