7장
- 수정기능 구현
- 삭제기능 구현
- 검색기능 구현
- 달력기능 구현
옵셔널 체이닝(optional chaining) 문법
null이거나 undefined일 수 있는 객체의 프로퍼티를 에러 없이 접근 가능
아래의 두개의 예를 보자. 두 구문은 같은 의미이다.
const log = route.params?.log;
const [title, setTitle] = useState(log?.title ?? '');
const [body, setBody] = useState(log?.body ?? '');const log = route.params ? route.params.log : undefined;
const [title, setTitle] = useState(log ? log.title : '');
const [body, setBody] = useState(log ? log.body : '');
map 함수
반복되는 컴포넌트를 렌더링하기 위해 사용
수정 기능 추가시
일치하는 id만을 교체된 새로운 배열을 생성
filter 함수
주어진 함수 조건을 통과하는 요소를 모아 새로운 배열로 반환
삭제 기능 추가 시
특정 id를 제외한 항목들로만 구성된 새로운 배열을 만들어서 상태를 업데이트
Boolean이 아닌 타입에 ! 연산자를 쓴다면
- !null -> true
- !{} -> false
- !'' -> true
- ![] -> false
화면 크기를 dp 단위로 가져오는 방법
(1) Dimensions.get을 사용
컴포넌트 외부에서도 작동하므로 StyleSheet에서도 사용가능
화면의 방향을 바꾸거나, 폴더블 디바이스를 사용하면 이 크기가 바뀔 수도 있으므로 유의해야한다.
이런 경우, Dimensions.addEventListener와 Dimensions.removeEventListener를 사용해
크기가 바뀌는 이벤트에 대비 필요
import {Dimensions} from 'react-native';
const { width, height } = Dimensions.get('window');Dimensions.get에는 두 가지 문자열 사용가능
'window'를 사용하면 현재 앱에서 사용할 수 있는 영역의 크기
'screen'을 사용하면 전체 화면의 크기
(2) useWindowDimensions Hook을 사용하는 것
화면 크기가 바뀌는 상황에 대비할 필요 X
import React from 'react';
import {useWindowDimensions} from 'react-native';
function MyComponent() {
const {width, height} = useWindowDimensions();
}
TextInput에 autoFocus Props는 컴포넌트가 화면에 나타날 때 자동으로 포커스가 잡히게 한다.
즉, 바로 입력할 수 있게 한다는 것.
text.includes
텍스트에 특정 문자열이 존재하는지 확인하는 함수
some
배열 원소 중 특정 조건이 true인 원소가 하나라도 있으면 true를 반환하고,
모든 원소가 특정 조건을 만족하지 않을 때 false를 반환
아래의 예시를 보면 이해가 된다.
const numbers = [1, 2, 3, 4, 5];
numbers.some(number => number > 6);
// 모든 원소에 대해 위 함수를 돌려보고,
// 만족하는 원소가 하나도 없어서 false 반환
numbers.some(number => number > 1);
// 2가 1보다 크기 때문에 true 반환
// 2 이후의 원소들은 함수를 돌려보지 않음
달력 화면을 만드는 과정에서 react-native-calendars라는 라이브러리를 사용
설치는 아래와 같다
yarn add react-native-calendars
달력에 표시하기 위해 markedDates라는 객체를 사용
객체에 들어가는 키 값은 날짜의 ‘yyyy-MM-dd’ 형태
marked 값을 true로 설정하면 날짜에 점이 나타난다.
selected 값을 true로 설정하면 이 날짜를 선택했다는 의미로 날짜의 배경색을 변경
색상은 theme이라는 Props를 통해 변경 가능
function CalendarView() {
// 현재 연/월 사용하기
const markedDates = {
'2021-05-17': {
selected: true,
},
'2021-05-18': {
marked: true,
},
'2021-05-19': {
marked: true,
},
};
return (
<Calendar
style={styles.calendar}
markedDates={markedDates}
theme={{
selectedDayBackgroundColor: '#009688',
arrowColor: '#009688',
dotColor: '#009688',
todayTextColor: '#009688',
}}
/>
);
}
reduce
배열 안 값을 연산해 하나의 결괏값을 도출해낼 때 사용
첫 번째 파라미터로 배열의 각 원소를 사용해 특정 값을 연산하는 함수를 넣고, 두 번째 파라미터로 초깃값을 넣음
아래의 예의 경우, 첫 번째 파라미터인 연산 함수에서 acc는 축적되는 값, current는 당장의 현재 값을 의미
그래서 순차적으로 덧셈을 하는 함수가 첫 번째 파라미터가 된다.
const array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const sum = array.reduce((acc, current) => {
return acc + current;
}, 0);
useMemo라는 Hook
값을 메모이제이션(memoization)해 최적화 가능.
메모이제이션이란 동일 계산을 반복 할 때 이전에 계산한 값을 재사용해 처리를 최적화하는 것
사용법은 아래와 같다
const value = useMemo(() => compute(a, b), [a, b]);
로그의 날짜 및 시간을 수정하는 기능을 구현
=> react-native-modal-datetime-picker 라이브러리
설치는 아래와 같다
yarn add react-native-modal-datetime-picker @react-native-community/datetimepicker
zIndex 속성
컴포넌트가 다른 컴포넌트와 위치가 중첩될 때 앞/뒤 레이어 중 어디에 나타날지 결정하는 값
기본적으로 더 높은 값이 더 낮은 값을 가진 컴포넌트를 가림.
DateTimePickerModal
날짜 또는 시간을 누르면 날짜를 수정
- onConfirm: 날짜를 선택했을 때 호출되는 함수. 파라미터는 Date 객체.
- onCancel: 날짜 선택을 취소했을 때 호출되는 함수.
- mode: 모달의 모드를 설정. 설정 가능 값으로 date, time, datetime.
- date: 컴포넌트에서 보여졌을 때 초깃값으로 설정할 Date 객체 타입의 값.
- isVisible: true로 설정하면 모달이 보이고, false로 설정하면 모달이 사라짐.
<DateTimePickerModal
onConfirm={onConfirm}
onCancel={onCancel}
mode={mode}
date={date}
isVisible={visible}
/>
useReducer 함수
상태를 관리할 때 사용
상태를 업데이트하는 로직을 컴포넌트 바깥에 구현할 수 있다는 장점
첫 번째 인자에는 reducer 함수를 넣고, 두 번째 인자에는 상태의 초깃값
- state: 상태
- action: 변화를 정의하는 객체
- reducer: state와 action을 파라미터로 받아와서 그다음 상태를 반환하는 함수
- dispatch: action을 발생시키는 함수
'프로젝트 진행 공부 > 리액트 네이티브(React Native)' 카테고리의 다른 글
| 6장 요점 정리 (0) | 2022.10.11 |
|---|---|
| 5장 요점 정리 (1) | 2022.10.06 |
| 4장 요점 정리 (0) | 2022.10.04 |
| 3장 요점 정리 (0) | 2022.10.04 |
| 1, 2장 요점 정리 (0) | 2022.09.30 |
댓글