React Native

업로드할 사진 선택 또는 카메라 촬영하기 리액트 네이티브 앱에서 버튼을 클릭했을 때 업로드하라 사진을 갤러리에서 선택할지 아니면 카메라로 새로 촬영할지 사용자가 선택하도록 모달을 띄어보려고 한다. ActionSheetIOS는 이름에서 유추할 수 있듯이 iOS에서만 지원되는 API로, 지금과 같이 사용자에게 선택지를 줄 때 iOS에서 주로 사용하는 UI다. 안드로이드의 경우에는 모달을 통해 선택할 수 있도록 구현하는데, 만약 안드로이드에서도 ActionSheetIOS와 같은 UI로 기능을 구현하고 싶다면 @expo/react-native-action-sheet를 사용하면 된다. 1. 모달 만들기 리액트 네이티브에서 모달을 만들 때는 주로 Modal이라는 컴포넌트를 사용한다. 이 컴포넌트를 사용하지 않아도 ..

React Native에서 이미지를 업로드하기 위해선 react-native-image-picker 라이브러리를 사용하면 된다. 이 라이브러리를 사용하면 서진첩에서 이미지를 선택하거나 카메라로 사진을 촬영할 수 있다. 유사한 라이브러리로는 @react-native-community/cameraroll이 있는데, 이 라이브러리는 이미지를 선택하는 UI를 react-native로직으로 직접 만들 수 있다. 1. 라이브러리 설치 먼저 react-native-image-picker 라이브러리를 설치해준다. $ yarn add react-native-image-picker $ npx pod-install 2. iOS 설정 ios/프로젝트명/Info.plist 파일 하단에 아래 코드를 추가한다. 이 작업은 카메라 ..

useReducer 함수는 useState처럼 상태를 관리할 때 사용할 수 있는 또 다른 Hook 함수다. 이 함수를 사용할 때는 다음과 같은 개념이 사용된다. state : 상태 action : 변화를 정의하는 객체 reducer : state와 action을 파라미터로 받아ㅘ서 그 다음 상태를 반환하는 함수 dispatch : action을 발생시키는 함수 이 Hook는 useState를 여러번 사용하는 상황에 사용하면 유용할 수 있다.(꼭 써야되는건 아니다) 만약 useState로 여러개의 상태를 생성하고 변경한다면 useReducer를 사용할 수 있다. const initialState = {value: 1}; function reducer(state, action) { switch(action...

라이브러리 설치 및 시뮬레이터 실행 리액트 네이티브에서 datetimepicker를 사용하려면 아래 명령어를 통해 라이브러리를 설치하고, 시뮬레이터를 다시 실행해준다. $ yarn add react-native-modal-datetime-picker @react-native-community/datetimepicker $ npx pod-install $ yarn ios $ yarn android @react-native-community/datetimepicker는 iOS와 안드로이드 각각 플랫폼에서 특화된 날짜/시간 선택 컴포넌트를 제공해주고 react-native-modal-datetime-picker는 제공된 컴포넌트를 모달 형태로 쉽게 사용할 수 있게 해준다. DateTimePickerModal ..