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

React Navtive 스터디 5week

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

(4장 할일 목록 만들기 ②-①)

 

4.1 불변성을 지키면서 객체와 배열 업데이트하기

4.2 todos 상태 만들기 및 FlatList로 항목 화면에 나타내기

4.3 새 항목 등록하기

4.4 할일 완료 상태 토글하기

4.5 항목 삭제하기

4.6 AsyncStorage로 앱이 꺼져도 데이터 유지하기

4.7 정리

---

4.1.1 불변성을 지켜야 하는 이유

리액트에서 불변성을 지켜야 하는 이유는 렌더링 성능 최적화 방식 때문입니다. 리액트에서는 부모 컴포넌트가 리렌더링되면 기본적으로 자식 컴포넌트들 또한 리렌더링됩니다. ... 컴포넌트의 렌더링 성능을 최적화하기 위해서는 이전에 컴포넌트가 들고 있던 Props와 새로 받아올 Props를 비교하는 과정이 필요합니다. 이 과정에서 불변성을 유지하는 것이 정말 중요해집니다. 

 

4.1.2.1 새로운 항목 추가하기

불변성을 유지하면서 배열에 새로운 항목을 추가하는 방법 두가지.

1. spread 연산자 사용

const number = [0,1,2,3];
const nextNumber = [...numbers, 4];

2. 배열 내장 함수 concat 사용

const number = [0,1,2,3];
const nextNumber = numbers.concat([4,5,6]);

항목 제거는 filter, 항목 수정은 map 함수 이용을 추천.

---

4.2.2-4.2.3 TodoList, TodoItem 컴포넌트 만들기

 

TodoList 컴포넌트 만들고 App파일에 조건문과 함께 추가

const [todos, setTodos] = useState<TodosType[]>([
    {id: 1, text: '작업환경 설정', done: true},
    {id: 2, text: '리액트 네이티브 기초 공부', done: false},
    {id: 3, text: '투두리스트 만들기', done: false},
  ]);
  
 return(
	// 생략
	{todos.length === 0 ? <Empty /> : <TodoList todos={todos} />}
	// 생략
	)

 

책과 달리, 처음 세팅이 타입스크립트도 되어서, tsx 파일로 다 작성 중이라 타입 지정이 필요했다. (타입스크립트 잘 모르니까 같이 공부...)

우선 App.tsx 에서 TodosType의 type을 만들어 export해준다.

export type TodosType = {id: number; text: string; done: boolean};

function App() {
const [todos, setTodos] = useState<TodosType[]>([

//이하 생략

TodoList.tsx에서 import해서 사용한다.

import {TodosType} from '../App';

type TodosProps = {
  todos: TodosType[];
};

function TodoList({todos}: TodosProps) {

//이하 생략

TodoItem.tsx에서는 

import {TodosType} from '../App';

type TodosProps = {
  id: TodosType['id'];
  text: TodosType['text'];
  done: TodosType['done'];
};

function TodoItem({id, text, done}: TodosProps) {

//이하 생략

 

4.2.4 항목 사이에 구분선 보여주기

웹에서는 CSS의 & + & 셀렉터를 통해 특정 엘리먼트들 사이에만 테두리를 보여주게 설정할 수 있다. (<- 이것도 처음 알았네;)

But 리액트 네이티브에서는 셀렉터 기능 없어, FlatList의 ItemSeparatorComponent 이용

//TodoList.tsx

<FlatList
      ItemSeparatorComponent={() => <View style={styles.separator} />}

4.2.5 완료한 항목에 다른 스타일 적용하기

style 에서 배열 형식으로 두 가지 스타일을 넣어줄 수 있다.

//TodoItem.tsx

function TodoItem({id, text, done}: TodosProps) {
  return (
    <View style={styles.item}>
      <View style={[styles.circle, done && styles.filled]}>
        {done && (
          <Image
            source={require('../assets/icons/check_white/check_white.png')}
          />
        )}
      </View>
      <Text style={[styles.text, done && styles.lineThrough]}>{text}</Text>
    </View>
  );
}