React-Native/React-Native 공부

항상 ios 시뮬레이터로만 확인하다가 직접 핸드폰에 빌드해서 어플을 테스트해보니 아래 사진과 같이 키보드 창이 입력칸을 가리는 문제가 있다는 것을 알게 되었다. 보이던 화면에서 그대로 키보드가 올라오면서 패스워드 입력칸 같은 경우는 입력하면서 확인을 할 수 없었다. 이는 리액트 네이티브의 로 해당화면의 전체 뷰를 구성해주면 된다. behavior : 키보드에 반응하는 방식 지정 keyboardVerticalOffset : 사용자 화면 상단과 리액트 네이티브 뷰 사이의 거리 지정 https://reactnative.dev/docs/keyboardavoidingview KeyboardAvoidingView · React Native This component will automatically adjust i..

아래와 같이 값을 입력할 때 직접 입력하는 것이 아니라 선택지를 주고 그 중 하나를 고르게 하는 picker 방식을 사용하기 위해 드롭다운 형식의 picker를 지원해주는 'react-native-dropdown-picker' 라이브러리를 사용하였다. react-native-dropdown-picker 공식 사이트 https://hossein-zare.github.io/react-native-dropdown-picker-website/ React Native Dropdown Picker React Native Dropdown Picker is a single / multiple, categorizable, customizable, localizable and searchable item picker (d..

리액트 네이티브 어플을 만들면서 사진을 직접 업로드 하는 기능을 구현하기 위해 'react-native-image-picker' 패키지를 사용하였다. https://github.com/react-native-image-picker/react-native-image-picker GitHub - react-native-image-picker/react-native-image-picker: A React Native module that allows you to use native UI to select m :sunrise_over_mountains: A React Native module that allows you to use native UI to select media from the device li..

컴포넌트 (Component) : 화면에 나타나는 UI 요소 (= 재사용 할 수 있는 조립 블록) 컴포넌트는 단순히 UI 역할만 하는 것이 아니라 부모로부터 받은 속성(props)이나 자신의 상태(state)에 따라 표현이 달라지고 다양한 기능을 수행한다. 리액트 네이티브는 컴포넌트를 이용하여 화면을 구성한다. import React from 'react'; -> 리액트를 불러와서 사용. JSX는 React.createElement를 호출하는 코드로 컴파일되므로, 컴포넌트를 작성할 때 반드시 작성해야 하는 코드임 props -> props란 properties를 줄인 표현으로, 부모 컴포넌트로부터 전달된 속성값 혹은 상속받은 속성값을 말한다. -> 부모 컴포넌트가 자식 컴포넌트의 props를 설정하면 자..

React-Native 2015년 3월에 페이스북에 의해 공개된 오픈소스 프로젝트 사용자 인터페이스를 만드는 React(리액트) 에 기반을 두고 제작됨 웹 브라우저가 아닌 iOS와 안드로이드에서 동작하는 Native Mobile 애플리케이션을 만드는 자바스크립트 프레임워크 [ 장점 ] 작성된 코드 대부분이 플랫폼 간 공유가 가능해서 iOS, 안드로이드 두 플랫폼을 동시에 개발 가능 모바일 개발에 대한 지식이 없어도 자바스크립트만 알고 있으면 쉽게 시작 작성된 구성 요소들이 재사용 가능 [ 단점 ] 네이티브의 새로운 기능을 사용하는 데 오랜 시간이 걸림 유지보수의 어려움 잦은 업데이트 리액트 네이티브의 동작 방식 리액트 네이티브에는 자바스크립트 코드를 이용해 네이티브 계층과 통신할 수 있도록 연결하는 역할..