IT 개발85 ReactNative 리액트 네이티브 : 키보드 컨트롤하기 (IOS, Android 시뮬레이터 키보드) 1. 시뮬레이터 인풋 창을 눌렀음에도 키보드가 나타나지 않는 경우 시뮬레이터 활성화 상태에서 위에 I/O > Keyboard > Toggle Software Keyboard를 클릭해주면인풋 창을 다시 눌렀을 때, 키보드 입력이 활성화된다. 이렇게 키보드가 나타날 경우, 안드로이드에선 자동으로 화면이 줄어들지만 IOS는 화면을 그대로 다 가려버린다react-native의 KeyboardAvoidingView를 이용하여 키보드가 올라올 때 IOS 화면을 가리지 않도록 할 수 있다 2. IOS 키보드가 화면을 가리는 경우 (키보드 활성화 시 화면 줄어들게 하기)import {KeyboardAvoidingView, Platform} from 'react-native'; ... const styl.. 2022. 2. 10. ReactNative 리액트네이티브 : useState Hook으로 상태값 관리하기 (feat. 구조분해할당) 리액트네이티브와 리액트에서 상태 값을 관리하는 방법으로 useState를 사용할 수 있다import React, {useState} from 'react';function App() {const [value, setValue] = useState('');return (...)} useState는 구조분해할당(=비구조화 할당) 문법을 사용한다. const number = ['one', 'two', 'three'] const one = number[0];const two = number[1];const three = number[2]; 이렇게도 가능하지만, 구조 분해 할당을 통해 더 쉽게 작성이 가능하다 const [one, two, three] = number 이 같은 방법으로 useState도 첫 번째 .. 2022. 2. 8. ReactNative 리액트네이티브 : 기본 컴포넌트 구성 및 CSS 스타일링 1. ReactNative 컴포넌트 컴포넌트는 '구성 요소'라는 의미를 갖고 있다. 즉, UI를 구성하는 요소라고 이해하면 된다.리액트의 경우, 여러 컴포넌트로 쪼갠 뒤 그 컴포넌트를 이어 붙이면서 작업하는데 이는 리액트 네이티브에서도 마찬가지다. import React from 'react';import {SafeAreaView, StyleSheet, View, Text} from 'react-native';function App() { return ( React Native! );}; const styles = StyleSheet.create({ // 스타일 지정 방법 block: { .. 2022. 2. 8. ReactNative 리액트네이티브 안드로이드,IOS 시뮬레이터 이용하기 새로운 RN 프로젝트 생성npx react-native init npx는 Node.js와 함께 설치되며, node 환경에서 구동되는 CLI 도구를 간단하게 사용할 수 있도록 도와준다. yarn android 또는 yarn ios를 터미널에 입력하여 각 환경에서 앱을 구동할 수 있다.yarn start는 Metro를 구동해준다. Metro란, 리액트 네이티브를 위한 자바스크립트 번들러로 js 파일을 읽어서 순서에 맞게 하나의 파일로 합쳐주고 앱에서 실행 준비를 해준다. 참고로 yarn android, yarn ios 스크립트를 입력하면 start 스크립트가 자동으로 시작되어 따로 입력하여 실행하는 일은 드물다. 1. 안드로이드 환경에서 리액트 네이티브 앱 구동 안드로이드 스튜디오에서 새로운 프로젝트.. 2022. 2. 4. ReactNative 리액트네이티브 시작을 위한 설치목록 (MacOS 환경) node.js와 npm, VSCode 설치되어있다는 가정하에 진행 1. yarn : npm과 같은 패키지 관리 도구. npm보다 패키지를 더 빨리 설치한다npm install --global yarn 2. Java Development Kit : 안드로이드 앱 개발을 위해 필요하다 (버전 8 이상 설치)HomeBrew를 통해 편하게 설치가 가능하다brew install --cask adoptopenjdk/openjdk/adoptopenjdk8 3. WatchMan (권장) : 페이스북이 만든 파일 모니터링 도구 (MacOS만 지원)brew install watchman 4. 안드로이드 스튜디오 : 안드로이드 앱 개발을 위해 필요하다 https://developer.android.com/studio?hl.. 2022. 2. 4. [React] Invalid hook call. Hooks can only be called inside of the body of a function component.. 에러 해결방법 next.js error: cannot find module 'react' 프로젝트 진행하고 실행하는데 갑자기 에러가 발생하면서 react 모듈을 찾을 수 없다는 에러가 발생했다응? 분명 react 설치했을 텐데.. 해서 구글링을 통해 github에 누군가 남겨놓은 해결방안을 따라 해 봤다local에 react react-dom을 설치하라 해서 그대로 따라 했는데,, (이러면 안 됬었는데,,,) Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:You might have mismatching version.. 2021. 10. 15. 이전 1 2 3 4 5 6 ··· 15 다음 반응형
