[DEVOCEAN 스쿨] RN(React Native) 스터디 2주차

Teus 23.04.25

519 12 3

facebook twitter kakao link

12 3

facebook twitter kakao link

안녕하세요 Teus입니다.

올해부터 DEVOCEAN을 통해서 스터디를 진행하고 있습니다!

제가 준비한 주제는 React를 활용해서 크로스플랫폼을 플랫폼 어플리캐이션을 만드는 React Native입니다!

1주차에 이어 2주차에 진행한 스터디 내용을 다루는 포스팅 입니다!

0. 스터디 운영

지난주 스터디를 진행하고, 당일날 모여서 책을 읽기에는 스터디 주제와 맞지 않는다고 판단되었습니다.

(스터디를 진행하는 공유인프라 을지로 SKT타워 지하2층)

그래서, 이번주에는 3명으로 조를 나눈다음 조별로 실습 및 토의를 진행하기로 하였습니다.

이번주 역시 아이스브레이킹을 진행 했습니다!

(ㅍㅅ=ㅇㅇ 은 과연 뭘까요? Hint. 한글 = 영어)

그리고, 이제 팀원들 끼리 나눠서 실습을 해보며, 모르는게 있으면 서로 이야기를..

이번주 스터디간 배운 내용은 아래와 같습니다!

1. React사용 시 Array의 불변성 유지

React는 useState Hook을 통해서 특정 변수의 상태를 관리하고, 해당 변수의 값이 변경될 경우 변수가 포함된 Component를 Rerendering하게 됩니다.

이때 해당 변수의 값을 임의로 바꾸는것을 금지하고 있으며, Set State를 통해서 변경하게 합니다.

하지만 이때 상태를 관리하는 변수가 Array일 경우, 이 원본 Array를 inplace 변경해서는 안됩니다.

//App.js
function App() {
  const today = new Date();
  const [todos, setTodos] = useState([
    {id: 1, text: '작업환경 설정', done: true},
    {id: 2, text: '리액트 네이티브 기초 공부', done: false},
    {id: 3, text: '투두리스트 만들어보기', done: false},
  ]);
  //이때 todos에는 useState에 들어간 object가 있다.
  //이때 object의 값을 변경할 경우 React동작에 문제가 발생함
  //그래서 원본 Array를 map으로 복사하고, 복사된 Data를 가지고 원하는 데이터로 바꿔줌
  let temp = todos.map((dt) => dt)
  temp[0]['id'] = 222
  setTodos(temp)
 }

이 외에도 항목을 제거할때는 array.filter

//위 todos에서 id = 2를 제외하고싶을 경우
setTodos(todos.filter((data)=>data.id!=2))

항목을 추가할때는 array.concat(arr2)를 통해서 기존 Array의 불변성을 유지하면서 새로운 Array를 반환받아 사용해야 합니다.

2. FlatList 컴포넌트

FlatList컴포넌트는 Array형태의 자료를 받고, 이 자료를 화면에 랜더링 해주는 react-native 컴포넌트 입니다.

//TodoList.js
import React from 'react';
import {FlatList, View, Text, StyleSheet} from 'react-native';

function TodoList({todos}) {
  return (
    <FlatList
       //Item간에 특정 이미지, 그래픽, 텍스트 등을 추가하는 옵션
       ItemSeparatorComponent={() => <View style={styles.separator} />}
       style={styles.list}
       data={todos}
       renderItem={({item}) => (
         <View>
           <Text>{item.text}</Text>
         </View>
       )}
       //Data의 분별을 위한 id를 설정해주는 부분
       keyExtractor={item => item.id.toString()}
      />
   );
}

TodoList에 사용할 Data는 Array를 활용하고, renderItem에 화면에 어떤 데이터를 어떤 형식으로 표시할지 정하게 됩니다.

그러면 그냥 map을 통해서 <Text>를 쓰면 되지않냐 할 수 있습니다.

FlatList를 활용할 경우 추후에 나오지만 Lazy Loading과 Infinity Scroll을 보다 손쉽게 구현할 수가 있습니다.

3. 조건부 랜더링

기존 삼항연산자를 사용해서 조건부랜더링은 하는 법을 확인했습니다.

하지만 React에서는 boolean && Component(Style)을 통해서

조건부로 Style적용, Component의 rendering을 통제할 수 있습니다.

import React from 'react';
import {View, Text, StyleSheet, Image} from 'react-native';

//done이 true/false로 변하는 State임
function TodoItem({id, text, done}) {
  return (
     <View style={styles.item}>
        //done의 값에따라 style이 변하게됨
        <View style={[styles.circle, done && styles.filled]}>
          //done의 값에 따라 Component의 랜더링 여부가 결정됨
          {done && (
            <Image
              source={require('../assets/icons/check_white/check_white.png')}
            />
          )}
        </View>
          <Text style={[styles.text, done && styles.lineThrough]}>{text}</Text>
        </View>
    );
}

4. Touchable Component

HTML에서는 tag에다가 EventListener를 추가하여 touch발생시의 동작을 정의할 수 있었습니다.

React Native같은 경우 Component를 <TouchableOpacity>로 감쌀 경우 해당 Component 전체가 Touch에 따른 동작을 정의할 수가 있습니다.

(Touchable Component는 이 외에도 여러가지가 있습니다)

import React from 'react';
import {View, Text, StyleSheet, Image, TouchableOpacity} from 'react-native';

function TodoItem({id, text, done, onToggle}) {
  return (
    <View style={styles.item}>
      //내부의 View의 my_text를 touchable하게 만들어줌
      //onPress를 통해서 touch가 일어날 경우 할 동작을 정의해줌
      <TouchableOpacity onPress={() => onToggle(id)}>
        <View style={[styles.circle, done && styles.filled]}>
          my_text
        </View>
      </TouchableOpacity>
      <Text style={[styles.text, done && styles.lineThrough]}>{text}</Text>
    </View>
  );
}

5. Async Storage

Async Storage는 JavaScript의 await 문법을 사용해서 비동기로 key:value 형태의 Data를 저장하는 패키지 입니다.

import AsyncStorage from '@react-native-community/async-storage';
//데이터를 저장하는 방법
const save = async () => {
  try {
    await AsyncStorage.setItem('key', 'value');
    // string만 저장이 가능하기 때문에
    // object를 저장할 경우 JSON.stringify를 통해서 저장
    // await AsyncStorage.setItem('todos', JSON.stringify(todos));
  } catch (e) { }
}

//데이터는 불러오는 방법
const load = async () => {
  try {
    const my_var = await AsyncStorage.getItem('key');
    // my_var에 key값에 해당하는 Data를 회수해옴. 이경우는 'value'
  } catch (e) { }
}

//async storage를 초기화 시키는 방법
const clearAll = async () => {
  try {
    await AsyncStorage.clear();
  } catch (e) { }
}

그리고, react의 useEffect Hook을 사용해서 state변수의 값이 변함에 따라 어떤 data를 load, save하게 만들 수가 있습니다.

예를들어 todos라는 object값이 바뀔때마다 저장하고 싶다면 아래처럼 useEffect를 사용하는것 역시 가능합니다.

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

  const [todos, setTodos] = useState([
    {id: 1, text: '작업환경 설정', done: true},
    {id: 2, text: '리액트 네이티브 기초 공부', done: false},
    {id: 3, text: '투두리스트 만들어보기', done: false},
  ]);

  useEffect(() => {
    async function save() {
      try {
        await AsyncStorage.setItem('todos', JSON.stringify(todos));
      } catch (e) {
        console.log('Failed to save todos');
      }
    }
    save();
  }, [todos]);
  //todos값을 지켜보면서, 값이 변할경우 aysnc saver()함수를 실행시킴