[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

[React] Component Input declared PropTypes instead of propTypes 해결방법

이 오류는 React 컴포넌트의 prop 유형을 propTypes 대신 PropTypes 사용하여 선언할 때 발생합니다. 참고로 propTypes 객체는 부모로부터 전달받은 props의 데이터 유형 및 유효성 검사 규칙을 지정하는 속성입니다.ERROR Warning: Component Input declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment? 예를 들어 다음과 같이 PropTypes을 선언하는 대신import PropTypes from 'prop-types'; ... Input.PropTypes = { title: PropTypes.string.isRequired, placeholder: PropT..

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

[React] useState 사용법

React에서 useState는 상태를 추가하고 관리할 수 있게 해주는 hook입니다. 상태란 시간이 지남에 따라 변경될 수 있는 값으로 이 값을 저장하고 관리하는 데 useState를 사용합니다. useState 사용법 먼저 useState의 사용법은 다음과 같습니다. const [상태 변수, 상태 변경 함수] = useState(초기값); useState함수에 초기 상태 값을 매개변수로 호출하면 배열이 반환됩니다. 이 배열에는 현재 값을 나타내는 상태 변수와 상태 값을 변경하는데 사용하는 함수가 들어가 있습니다. 예를 들면 다음과 같습니다. import React, { useState } from 'react'; function Counter() { const [count, setCount] = us..

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

[React Native] 키보드 내리기 방법

React Native에서 화면에 이미 활성화되어 있는 키보드를 내리려면 React Native API에서 제공하는 키보드 모듈을 사용하면 됩니다. Keyboard 모듈은 키보드를 제어하는 데 사용할 수 있는 몇 가지 메서드를 제공하는데요. 그 중 키보드를 내리기 위해서는 Keyboard.dismiss() 메서드를 사용하면 됩니다. 키보드 내리기 예제 1 특정 버튼을 클릭했을 때 키보드를 내리는 예제입니다. import React from 'react'; import { View, TextInput, Button, Keyboard } from 'react-native'; const MyComponent = () => { return ( Keyboard.dismiss()} /> ); }; export de..

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

[React Native] iOS 시뮬레이터에서 키보드 안 보일 때 해결방법

현상 React Native로 개발 후 iOS 시뮬레이터를 실행했습니다. 터미널에 별다른 오류 로그가 찍히지 않으나 TextInput 컴포넌트를 클릭하면 키보드가 나타나지 않는 현상이 있었습니다. 해결방법 iOS simulator 안에 있는 Textinput에 focus한 상태로 command(cmd) + K를 입력합니다.

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