4장 요점 정리

4장

 

객체와 배열 타입의 상태를 다룰 때는 불변성(immutability)을 지켜야 함

=> 해당 객체를 직접 건드리지 않고 다른 객체를 만들어 덮어 씌워야 한다는 말

 

 

 

 

 

...info는 spread 연산자 문법

아래처럼 펼쳐 넣는다고 생각하면 된다.

세번째 줄처럼 하면 b의 값이 만들어진 새로운 객체 안에서 덮어씌워진다.

const object = { a: 1, b: 2, c: 3 };
const anotherObject = { ...object, d: 4 };
const anotherObject = { ...object, b: 4 };

 

 

 

 

 

항목 추가하기 : spread 사용 / concat 사용

항목 제거하기 : filter

항목 수정하기 : map

 

 

 

 

 

아래처럼 filter 함수에 넣는 인자 중 두 번째 파라미터로 항목의 index를 받아올 수 있다.

아래는 3번째 인덱스만을 제외하고 가져오겠다라는 의미

const nextNumbers = numbers.filter((number, i) => i !== 3);

 

 

 

 

 

map은 아래와 같이 사용한다.

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(number => number * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

const nextNumbers = numbers.map((number, i) => i === 3 ? 10 : number);
console.log(nextNumbers); // [1, 2, 3, 10, 5]

 

 

 

 

 

keyExtractor 는 각 항목의 고유 값을 추출해주는 함수

 

 

 

 

 

ItemSeparatorComponent Props를 지정해 컴포넌트 사이에 구분선을 설정 가능

 

 

 

 

 

안드로이드 시뮬레이터에서 한국어 설정하는 법

설정 > System > Languages & Input > Languages > 한국어 추가

 

 

 

 

 

함수를 만들어 특정 상수 또는 변수에 담지 않고 바로 사용하는 함수를 익명 함수라고 부름.

함수가 간결하고, 사용하는 곳이 한 곳밖에 없다면 익명 함수를 작성

 

 

 

 

 

아래의 구문을

onPress={() => onToggle(id)}

아래처럼 사용하면 오류가 뜬다.

이유는 컴포넌트가 렌더링될 때마다 onToggle이 호출되는 상황이 발생

onPress={onToggle(id)}

 

 

 

 

 

벡터 아이콘은 폰트 또는 SVG를 사용해 크기가 조정돼도 아이콘이 흐려지거나 깨지지 않음.

라이브러리로 있는 벡터 아이콘을 설치하는 방법은

아래의 구문을 터미널에 입력 후 설치

yarn add react-native-vector-icons

프로젝트 내에 android/app/build.gradle 파일을 열고 맨 밑에 아래의 구문을 추가

apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")

그리고 다시 yarn android를 실행하면 된다.

 

build.gradle 파일은 안드로이드의 범용 빌드 도구인 Gradle에서 사용하는 파일로

프로젝트의 의존성, 플러그인 및 빌드에 필요한 설정에 대한 정보를 가지고 있다.

 

벡터 아이콘은

https://oblador.github.io/react-native-vector-icons

위의 페이지에 가면 종류별로 볼 수 있다.

 

사용법은 아래와 같다.

import Icon from 'react-native-vector-icons/폰트이름';
const deleteIcon = <Icon name="사이트에서검색한아이콘이름" size={32} color="red" />;

 

 

 

 

 

Alert.alert 함수의 파라미터는 제목, 내용, 버튼 배열, 옵션 객체 순.

버튼 배열에 넣는 버튼 객체에는 text 값을 통해 버튼의 이름을 지정,

onPress를 통해 버튼이 눌렸을 때 호출할 함수를 설정 가능.

옵션 객체에서는

cancelable 값을 통해 안드로이드에서 Alert 박스 바깥 영역을 터치하거나

Back 버튼을 눌렀을 때 Alert가 닫히도록 설정할 수 있다.

onDismiss는 Alert가 닫힐 때 호출되는 함수

 

style은 cancel, default, destructive 값을 설정할 수 있는데 iOS에서만 작동.

안드로이드는 Alert처럼 보이는 컴포넌트를 직접 제작해야 한다.

 

 

 

 

 

 

---

 

 

 

 

 

AsyncStorage

• 리액트 네이티브에서 사용할 수 있는 key-value 형식의 저장소
• iOS에서는 네이티브 코드로 구현되어 있으며, 안드로이드에서는 네이티브 코드와 SQLite를 기반으로 구현
• 브라우저에서 사용하는 localStorage와 비슷
• 값을 저장할 때는 문자열 타입으로 저장
• getItem, setItem, removeItem, clear 등 메서드들 존재
• localStorage와의 큰 차이점이라면 AsyncStorage는 비동기적으로 작동
• 값을 조회하거나 설정할 때 Promise를 반환.
• 다루는 데이터의 규모가 커지면 성능이 떨어짐 (문자열 타입으로만 저장할 수 있기 때문에)
• 검색 또는 정렬 기능이 지원되지 않음
• 규모가 커졌을 때 사용할 수 있는 대안으로는 realm와 react-native-sqlite-storage

 

 

 

 

 

Promise

자바스크립트에서 비동기적 작업을 편하게 관리하도록 도와주는 객체

 

 

 

setTimeout 

• 주어진 시간 이후에 특정 함수를 실행하는 함수
• 첫 번째 인자에는 실행하고 싶은 함수를 넣고, 두 번째 인자에는 시간을 ms(0.001초) 단위로 넣는다.
• 첫 번째 인자로 넣은 함수는 현재 코드가 실행 중인 실행 컨텍스트가 끝난 다음에 호출
• 두 번째 인자에 0을 넣으면 자바스크립트 런타임 환경에 따라 최소 4ms~10ms 이후 함수로 실행
  (Node.js는 1ms 이후 실행)

 

 

 

 

 

Promise를 사용하면 콜백 함수로 비동기 작업을 관리하다 발생할 수 있는 콜백 지옥을 방지할 수 있다.

구조는 아래와 같다

const promise = new Promise((resolve, reject) => {
  // ...
})

• resolve와 reject는 둘 다 함수 타입
• resolve는 작업이 성공했을 때 호출하는 함수
• reject는 작업이 실패했을 때 호출하는 함수
• Promise에서 이행(resolve)된 결과는 Promise 객체의 then 메서드를 통해 사용
• 거부(reject)된 오류는 reject 메서드를 통해 사용

 

 

 

 

 

async와 await

함수를 선언할 때 앞부분에 async 키워드를 붙이고, Promise의 앞부분에 await를 사용

 

 

 

 

 

AsyncStorage 설치는 아래의 구문을 터미널에 치면 된다.

yarn add @react-native-community/async-storage

 

 

 

 

 

AsyncStorage 불러오기

사용하고 싶은 컴포넌트에 다음 코드를 사용

import AsyncStorage from '@react-native-community/async-storage';

 

 

 

 

 

AsyncStorage 저장하기

특정 값을 저장할 때는 아래처럼 setItem 메서드를 사용

await AsyncStorage.setItem('key', 'value');

값을 저장할 때는 문자열 타입

객체 및 배열 타입을 저장하려면 다음과 같이 JSON.stringify 함수를 사용

await AsyncStorage.setItem('todos', JSON.stringify(todos));

 

 

 

 

 

AsyncStorage 불러오기

특정 값을 불러올 때는 getItem 메서드를 사용

const value = await AsyncStorage.getItem('key');

객체 및 배열을 불러오려면 JSON.parse 함수를 사용해 문자열을 JSON으로 변환

const rawTodos = await AsyncStorage.getItem('todos');
const todos = JSON.parse(rawTodos);

 

 

 

 

AsyncStorage 값 초기화

모든 값을 초기화하고 싶다면 다음과 같이 clear 메서드를 사용

await AsyncStorage.clear();

 

 

 

 

 

useEffect 사용

• 첫 번째 인자에는 주시하고 싶은 값이 바뀌었을 때 호출하고 싶은 함수
• 두 번째 인자에는 주시하고 싶은 값을 배열 안에 넣음
• useEffect 함수는 정리(cleanup)하는 기능이 있어서 async 키워드를 붙이면 안 됨
• 등록된 순서대로 작동
• 따라서, 불러오는 useEffect 를 저장하는 useEffect 보다 위에 작성을 해야 함

useEffect(() => {
    console.log(todos);
  }, [todos]);

 

 

 

 

 

아래의 경우,

todos가 변화하는 순간,

return에 들어갈 기존의 todos 값을 들고만 있는다.

그리고 useEffect 함수가 구동이 되는데

그 후 바로 아래에 있는 업데이트 console.log(todos); 만 실행되고 있다가

이후 useEffect 함수가 있는 화면이 보이지 않게 이동하게되면

그 때 return 에 있는 console.log(todos); 를 실행 시킨다.

useEffect(() => {
  // 업데이트된 다음에 출력
  console.log(todos);
  return () => {
    // 업데이트되기 전에 출력
    // 여기서 todos는 업데이트되기 전의 값을 가리킵니다.
    console.log(todos);
  }
}, [todos])

 

 

 

 

 

useEffect를 사용해 컴포넌트 마운트 / 언마운트 시 특정 작업을 하고 싶다면

useEffect의 두 번째 파라미터에 비어있는 배열을 사용한다.

두 번째 파라미터에 배열이 비었으면, 컴포넌트가 마운트될 때 딱 한 번만 함수가 호출

useEffect(() => {
  console.log('컴포넌트가 마운트될 때 출력됨');
  return () => {
    console.log('컴포넌트가 언마운트될 때 출력됨');
  }
}, [])

 

 

 

 

 

reload 방법은 node 터미널 창에서 R을 누르면 된다.

 

 

 

 

 

AsyncStorage를 사용할 때는 직접 사용하지 않고 코드를 한번 추상화시켜서 사용할 것을 권장

 

 

 

 

 

안드로이드에서 AsyncStorage의 최대 크기는 기본적으로 6MB로 설정

최대 용량을 늘리려면 android/gradle.properties 파일에 다음 코드를 추가

AsyncStorage_db_size_in_MB=10