ReactNative
1.React Native란?
인터페이스 구축을 위한 javascript 라이브러리주로 웹 개발에 사용 (웹 환경을 위해 개발됨)react-dom 라이브러리가 웹 지원을 도움: react-dom 없이 React 라이브러리 자체는 플랫폼-애그노스틱하며, 이 라이브러리를 통해 react가 산출한 결과를
2.React Native 설치: Expo CLI vs React Native CLI
CLI: Command Line Interface두 툴 모두 React Native 프로젝트 생성테스팅 기기 및 시뮬레이터에 React Native 앱 실행React Native 앱 구축하는 데 사용CLI를 제공하는 회사는 3rd party service로, 앱 개발에
3.React Native 파일 생성 및 테스트 실행
2024.2.14 기준파일 생성 명령어npx create-expo-app AwesomeProject코드 작업하기 전 (코드 작성 중에는 'npm start' 프로세스 유지할 것)npm start참고: https://reactnative.dev/docs/envi
4.React Native: 스타일, APP 및 코어 컴포넌트(View, Text, Button)
CSS와 같은 추가적인 스타일링 언어는 없고, 자바스크립트 내(Inline styles, StyleSheet Objects 등)에서 스타일을 적용할 수 있음자바스크립트 프로퍼티 적용: CSS 프로퍼티와 비슷하지만, 전체 CSS 프로퍼티와 기능 세트 중 일부만 지원App
5.React Native: Flexbox
외관을 조정하는 데 사용하며, React Native Flexbox는 CSS Flexbox와 매우 유사컨테이너 내부에 요소 배치 및 특정 요소가 차지하는 공간을 제어 \- flex: 1 -> 컨테이너에 사용할 수 있는 모든 공간을 차지하도록 확장 \- flexDir
6.React Native: 이벤트 처리 방식 (+useState())
웹에서 사용하는 방식과 동일: 이벤트 리스너를 추가 -> 이벤트 핸들러 함수에 연결 -> useState 훅을 사용해 컴포넌트에서 상태(State) 관리이벤트 핸들러 함수에 연결하는 방법: React Native에서 컴포넌트에 제공하는 특수 이벤트 리스너 프로퍼티 사용
7.React Native: 상태 업데이트 (전개연산자, 화살표 함수)
새 상태가 이전 상태에 의존할 때 업데이트하는 방법: 상태 업데이트 함수에 함수 전달 ** 전개연산자 ([...])
8.React Native: 상태 업데이트 (전개연산자, 화살표 함수)
새 상태가 이전 상태에 의존할 때 업데이트하는 방법: 상태 업데이트 함수에 함수 전달 ** 전개연산자 ([...])
9.React Native: iOS, Android 스타일링 차이점
React Native는 모든 플랫폼에서 동일하게 보이지만, 간혹 아래와 같이 iOS와 Android에서 다르게 보이는 경우가 있어 코드 수정이 불가피할 때가 있음.React Native는 Text 컴포넌트를 해당하는 네이티브 위젯(UI 요소)로 전환하는데, iOS에서
10.React, JS: 목록 관련 key 및 map
React Native에서도 동일하게 사용React에서 동적으로 생성되는 목록에서 각 항목을 식별하는 데 사용되는 속성key를 통해 각 항목의 변화를 추적하고 효율적으로 업데이트React Native에서도 동일하게 사용JavaScript에서 배열을 순회하며 각 원소에
11.React Native: ScrollView, FlatList (+key 생성 방법)
웹사이트에서는 요소가 사용 가능한 공간을 넘어서면 기본값으로 스크롤바가 나타나 스크롤 가능 -> 앱은 따로 설정 필요React Native에서 제공하는 ScollView 사용ScollView는 스크롤 기능만 제공 -> 외부 View를 통해 화면상 영역이 차지하는 공간을
12.React Native: 다른 파일의 함수 이용 및 props
React와 React Native에서 사용되는 개념으로, 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 전달하는 데 사용됨props 객체는 부모 컴포넌트에서 전달한 모든 속성을 포함 -> 자식 컴포넌트에서 이를 참조하여 데이터를 가져옴
13.React Native: "Warning: Each child in a list should have a unique "key" prop." 오류 해결
key는 변하지 않고, 유일해야 함가장 먼저 index가 떠오르지만, React(+React Native)에서는 index로 key값을 주는 것을 지양 -> 항목들이 재배열(삽입 및 삭제)될 경우 비효율적으로 동작하기 때문해결방법 1: key를 item 값으로 세팅 -
14.React Native, js: Pressable, filter(), bind()
<Pressable onPress={}></Pressable>아이템을 터치할 수 있게 해주는 컴포넌트로, onPress와 함께 사용fitter는 map처럼 javascript에 내장된 메서드로, 배열에서 호출 가능이전 배열에서 필터로 걸러낸 모든 아이템을 제
15.React Native: 모달(Modal), 이미지(Image)
💡 모달 내장된 모달 컴포넌트 사용
16.React Native: 상태 표시줄 바꾸기
app.json의 expo에서 불러와, 루트 App 컴포넌트의 JSX 코드에서 작업style 속성을 이용하여 상태 표시줄의 상태 바꾸기JSX 코드의 루트 단계에서는 형제 요소 허용 X -> 만약 StatusBar 외에 다른 형제 컴포넌트가 있다면, fragment(&l
17.React Native: 디버깅(debugging)
에러 메시지 살펴보기로그(log) 남기고 확인하기: console.log()터미널에서 'npm start'를 실행터미널에 m 입력 -> 애뮬레이터에 개발자 메뉴가 뜸개발자 메뉴의 'Open JS Debugger' 클릭 -> Chrome 개발자 도구가 열림 (다시 'np
18.React Native: 그림자, TextInput 속성, LinearGradient, ImageBackground
안드로이드용 프로퍼티elevation: 레벨이 높을수록 진한 그림자 표시 (0, 1, 2, 3..)iOS용 프로퍼티shadowColor: 그림자 색깔shadowOffset: {width: , height: } -> 그림자를 만드는 객체로부터 그림자가 어느정도 질지sha
19.React Native: 경고창(Alert), Error: Text strings must be rendered within a <Text> component.
\*\* TextInput에서 입력받는 값은 숫자로 받아도(keyboardType를 number-pad로 설정해도) 반드시 문자열\*\* parseInt(): 숫자로 변환\*\* isNan(): 숫자인지 아닌지 판별 (숫자면 true)경고창은 경고창을 표시하는 함수를
20.React Native: SafeAreaView, 재사용 가능한 컴포넌트 및 색상
실행 중인 장치를 자동으로 감지하고, 노치 및 상태 표시줄과 콘텐츠 사이에 적절한 간격을 자동으로 설정하는 컴포넌트'components' 폴더 생성'이름.js' 파일 생성필요한 곳에 컴포넌트 사용'util' 혹은 'constants' 폴더 생성'colors.js' 파일
21.EAS Managed Workflow 기본 정리
지극히 개인적인 경험을 통한 정리..React Native CI/CD 서비스인 Expo Application Services(EAS)는 아주 간단하게 개발 및 릴리스 프로세스를 자동화할 수 있다.Expo는 환경이 크게 Managed Workflow와 Bare Workf