[RN] study 4week / 할일 목록 만들기 ①-①

React Navtive 스터디 4week

도서: [리액트 네이티브를 다루는 기술 / 김민준 / 길벗]

(3장 할일 목록 만들기 ①)

 

3.1 프로젝트 기반 다지기

3.2 TextInput으로 사용자 키보드 입력받기

3.3 정리

---

3.1.3.1 react-native-safe-area-context 서드 파티 라이브러리 사용하기

특정 부분의 여백만 비활성화하고 싶다면 react-native-safe-area-context 서드 파티 라이브러리* 사용.

*서드 파티 라이브러리 ? 커뮤니티에서 오픈 소스로 공개한 라이브러리

yarn add react-native-safe-area-context

cd ios
pod install
cd ../
yarn ios
yarn android

안드로이드의 경우에는 yarn android할 때 이 작업이 자동으로 이뤄지지만, iOS의 경우에는 ios 디렉터리에 들어가서 pod install 명령어 실행해야 한다. (처음에 이 과정 없이도 시뮬레이터 작동하길래 SafeAreaProvider 코드를 막 넣었는데, 오류남.. pod install 설치 필수!)

 

import React from 'react';
import {StyleSheet} from 'react-native';
import {SafeAreaProvider, SafeAreaView} from 'react-native-safe-area-context';
import DateHead from './components/DateHead';

function App() {
  const today = new Date();

  return (
    <SafeAreaProvider>
      <SafeAreaView edges={['bottom']}>
        <DateHead date={today} />
      </SafeAreaView>
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({});

export default App;

- SafeAreaProvider 는 App 컴포넌트 가장 바깥 부분에서 딱 한 번 사용하고, 다른 화면에서는 SafeAreaView 컴포넌트 하나만 사용하면 된다.

- SafeAreaView에 edges라는 Props 설정은 SafeArea를 적용할 모서리를 배열 형태로 전달. 배열에 bottom 값을 넣어 설정하면 SafeArea를 하단 부분에만 적용한다는 의미. top, left, right 있고, left, right은 가로 모드 사용할 때 필요한 설정.

(<SafeAreaView edges={['bottom']}> 결과)=> StatusBar와 DateHead 겹쳐짐

- 겹쳐진 영역 수정하려면 StatusBar 높이와 일치하는 빈 View 보여주면 되는데, 디바이스별로 높이가 다르다. 다만, react-native-safe-area-context 라이브러리로 구현 가능.

 

3.1.3.2 useSafeAreaInsets로 StatusBar 높이 구하기

useSafeAreaInsets() Hook 함수를 사용하면 각 모서리에 필요한 공백의 크기를 알아올 수 있다. 

 //StatusBar 높이 구하기
  const {top} = useSafeAreaInsets();
  
  return(...
  <View style={[styles.statusBarPlaceholder, {height: top}]} /> 
  ...)

3.1.3.3. StatusBar 내용 색상 변경하기

dark-content(어두운 내용), light-content(밝은 내용), default(시스템 기본 설정) 가능. iOS, 안드로이드 공통 설정.

<StatusBar barStyle="light-content" />

---

3.1.4 레이아웃 준비하기

 

AddTodo(Input area)

Empty(Center area, 할일없을때 View)

App에서 SafeAreaView => style, flex=1 적용하기

 

3.1.5 이미지 사용하기

 

ppi(pixel per inch)란? 1inch에 몇 px이 들어갈 수 있는지를 의미하는 밀도 단위.

(ppi는 디스플레이에서 사용하는 단위이고, dpi는 인쇄물에서 사용하는 단위)

 

리액트 네이티브에서 스타일링할 때 크기는 모두 dp로 설정합니다. 

dp(density=independent pixel)란? 1인치당 픽셀 밀도에 따라 크기가 일관된 UI를 보여줄 수 있는 단위.

dp = px * 160 / ppi

px = dp * ppi / 160

 

iphone 11pro(해상도 2436px*1125px, 화면 밀도 458ppi)에서 너비 200 size에 선명한 이미지를 보여주려면? 200*458/160 = 572.5px 너비를 가진 이미지를 사용해야 한다. 

iphone 11(해상도 1792px*828px, 화면 밀도 325ppi)에서 너비 200 size에 선명한 이미지를 보여주려면? => 407.5px 너비 이미지

 

(아이폰 14는 해상도 2532×1170픽셀, 픽셀 밀도는 약 460PPI. 아이폰 14 플러스는 해상도 2780×1284픽셀, 픽셀 밀도 약 458PPI)

시뮬레이터에서 디바이스 변경하려면(명령어로)

iOS, 디바이스 리스트 확인 명령어
xcrun simctl list devices

특정 디바이스 지정 시뮬레이터 가동
yarn react-native run-ios --simulator="iPhone 8"

*시뮬레이터 File => Open Simulator 가 편하긴 함..

파일명 뒷부분이 .ios.png로 끝나는 파일은 iOS 운영 체제에서, .android.png로 끝나는 파일은 안드로이드 운영 체제에서 보임.

 

<Image source={require('../assets/images/circle.png')} />

 

3.1.5.1 resizeMode 이해하기

Image 컴포넌트는 따로 설정하지 않으면 실제 이미지 크기를 기반으로 dp 단위의 크리고 변환되어 나타남.

resizeMode="cover" 

cover, contain, stretch, repeat, center 값 있음.

 

3.1.5.2 외부 이미지 사용하기

(1)
<Image source={{url: 'https://via.placeholder.com/150'}} />
(2)
const source = {url: 'https://via.placeholder.com/150'}
<Image source={source} />

 

App.tsx 에서 block 스타일 background: "white" 설정해주기 (안드로이드 시뮬레이터의 경우 기본 배경색은 연한 회색,, 흰색으로)