[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

[React Native] TextInput 별표 표시 방법

secureTextEntry 일반적으로 React Native에서 TextInput 컴포넌트에 내용을 입력하면 우리가 입력한 내용이 그대로 화면에 나타납니다. 비밀번호나 신용카드 번호와 같은 민감한 정보를 다른 사람의 눈에 띄지 않도록 보호하려는 경우 secureTextEntry를 사용합니다. React Native의 secureTextEntry는 TextInput 컴포넌트와 함께 사용할 수 있는 프로퍼티입니다. secureTextEntry가 true로 설정되어 있으면 TextInput 컴포넌트에 입력된 모든 텍스트가 숨겨지고 점이나 별표로 대체되어 비밀번호와 같은 민감한 정보를 보호할 수 있습니다. secureTextEntry 사용 방법 다음은 React Native에서 secureTextEntry를 ..

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

[React] Error: Element type is invalid 오류 해결방법

이 오류 메세지는 리액트에서 정상적으로 내보내지 않은 컴포넌트를 렌더링하려고 할 때 발생합니다. Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of `ListScreen`. 오류가 발생한 코드는 다음과 같습니다. ListScreen.js..

• format_list_bulleted React
• · 2023. 3. 30.
• textsms