React Native
-
[React Native] AppState로 앱의 현재 상태 받아오기React Native 2024. 5. 12. 20:51
React Native에는 현재 실행 중인 앱이 foreground에 있는지 background에 있는지에 대한 상태를 반환해주는 AppState API를 제공한다.보통 푸시 알림 처리나 앱 재실행 후 처리 시에 사용된다. 1. foreground? background?background는 어느정도 짐작이 가는 상태이나 foreground는 무엇을 의미할까?요약하자면 아래와 같다! foreground는 사용자가 앱 안에 있는 상태를 의미하며,background는 사용자가 앱 밖에 있는 상태를 의미한다. 2. 반환값active: 사용자가 앱의 foreground 내에서 실행 중인 경우(Android / IOS)background: 앱이 background에서 실행 중인 경우(Android)사용자가 다른 앱..
-
[React Native] 로그인/회원가입 과정을 통해 알게 된 input 옵션React Native 2024. 4. 28. 23:25
현재 로그인/회원가입 과정을 진행 중인데 과정 속에서 알게 된 점을 정리하고자 한다. 1. style(1) style 다중 설정style을 여러개 지정하고 싶은 경우에는 아래와 같이 배열로 묶어 ,로 구분해주면 된다.style={[styles.container, styles[varient], styles[size]]}> (2) props에 따른 style 설정공통 컴포넌트를 생성하다 보면 props를 활용해 모양에 대해 다양한 변화를 주게 되는데이를 style에 바인딩할 경우에는 아래와 같이 styles["바인딩하는 props명"] 형태로 사용하면 된다.style={styles[varient]}> 이렇게 할 경우 예를 들어 내가 전달한 varient 옵션이 outlined라면 아래와 같이 style에서 ..
-
[React Native] 핵심 컴포넌트 및 스타일React Native 2024. 4. 21. 15:40
React Native에 대한 강의를 들으며 중요한 내용들을 기록하고자 한다! (여담으로 React Native 프로젝트를 처음 해본 필자는 시뮬레이터가 제대로 빌드되게 하는 과정조차도 험난했다고 한다..) 1. ViewView 컴포넌트는 React Native에서 가장 기본적인 컴포넌트이고 웹에서의 div와 유사하다고 하다. 그러나 웹에서 div의 경우, div 안에 바로 텍스트 내용을 적어도 무방하나React Native의 View에서는 Text 컴포넌트를 추가하여 그 안에 텍스트 내용을 적어야 한다고 한다.그렇지 않으면 에러가 발생한다!텍스트 내용 텍스트 내용 2. Style일단 브라우저가 아니기 때문에 css 코드를 작성할 수는 없으며React Native에서는 스타일 속성에 대해 아래와 같이 ..
-
[React Native] React Native란?React Native 2024. 4. 15. 10:32
React Native를 활용하는 강의를 수강하는 중인데 정작 React Native에 대해 무지하다는 생각이 들어 강의가 본격적으로 시작되기 전에 공부하고자 한다. 1. React Native란?React Native란 이름에서 알 수 있듯이 React를 기반으로 만들어진 javascript 기반의 프레임워크로, 크로스 플랫폼 앱 개발을 가능하게 한다. (1) 크로스 플랫폼 앱이란?크로스 플랫폼 앱은 하나의 소스 코드로 Android, ios에서 똑같이 작동하는 앱을 의미하며, 네이티브 앱과는 대조되는 개념이다. 네이티브 앱은 각 운영 체제(Android, ios)에 맞춰 따로 개발 및 운영이 필요하다.어떻게 보면 당연한 게 각 앱마다 사용하는 프로그래밍 언어도 다르고 개발하는 플랫폼도 다를 것이기 ..