[RN] study 2week ③Todo App

[work-travel(todo) app 만들기]

——————3.0 Introduction——————

expo init WorkHardTravelHardApp

<------error

아니, 이전 프로그램 설치는 어떻게 된거지?

expo —version 없다

zsh: command not found: expo

 

npm install --global expo-cli하고, expo init WorkHardTravelHardApp했지만, 

zsh: command not found: expo

프로젝트 생성 안 된다.

 

(구글링 - https://pongsoyun.tistory.com/75)

 

이유는 모르겠지만, 지난 프로젝트 설치 시 했던 과정(아래↓)을 따라갔는데, profile에 잘 추가되어 있는 걸 확인하고 끈다. 다시 설치해본다. 이번에는 된다. (뭐지?😧)

 

<

해결방법을 요약하자면, 자신의 계정 홈 경로에 npm global 설치 패키지 디렉토리를 만들고 글로벌 설치시에 해당 경로로 패키지가 설치 되도록 하는 방법인데, 다음의 과정을 진행하면 된다.

mkdir ~/.npm-global

npm config set prefix '~/.npm-global'

 

vi ~/.profile

profile 제일 하단에 다음 코드를 추가한다.

export PATH=~/.npm-global/bin:$PATH

:wq 저장 후 변경된 프로필 내용을 적용 해준다.

source ~/.profile

끝이다.

다시 

npm install --global expo-cli

>

------>

 

지우고 폴더 옮겨서 다시 설치했다.

yarn start (yarn이 설치되어 있었는지 yarn으로 하라네,..?)

git repository 연결까지 완료

 

——————3.1 Touchables——————

TouchableOpacity =>애니매이션 효과, 누르면 투명해지는, 투명도 설정 가능.

<TouchableOpacity activeOpacity={0}>
  <Text style={styles.btnText}>Work</Text>
</TouchableOpacity>

 

TouchableHighlight => TouchableOpacity를 더 많이 쓴다!?

<TouchableHighlight
  underlayColor="#DDD"
  activeOpacity={0.5}
  onPress={()=> console.log("pressed")}
>
 <Text style={styles.btnText}>Travel</Text>
</TouchableHighlight>

 

TouchableWithoutFeedback => UI 변화는 없다. 유저에게 이벤트를 보여주고 싶지 않을 때 사용

 

Pressable https://reactnative.dev/docs/pressable

=> 다양한 옵션. delayLongPress, disabled, hitSlop(요소 바깥 어디까지 탭 누르는 것을 감지할지 정하는 것.)

 

——————3.2 TextInput——————

work, travel 버튼 클릭 style 적용. useState 이용.

<TouchableOpacity onPress={work}>
	<Text style={{...styles.btnText, color: working ? "white" : theme.grey}}>Work</Text>
</TouchableOpacity>
<TouchableOpacity onPress={travel}>
	<Text style={{...styles.btnText, color: !working ? "white" : theme.grey}}>Travel</Text>
</TouchableOpacity>

text input 은 React Native에서 유저가 text를 쓸 수 있는 유일한 방법

React Native에는 textarea나 input 없다!

 

keyboardType => 키보드 타입을 유형에 맞게 변경해줌

keyboardType=“number-pad” => 숫자 패드

keyboardType=“email-address” =>골뱅이, . 등이 보여짐

keyboardType=“phone-pad” => #, * 등이 보여짐

 

iOS 와 안드로이드 적용 가능한 키보드 타입이 다름

예로, iOS는 url 타입도 있는데, /와 .com 등이 보이는 키보드 타입이 있음.

 

returnKeyType도 비슷.

비밀번호 입력의 경우, secureTextEntry

여러 줄 써야하는 경우, multiline

 

const onChangeText = (event) => console.log(event)

<TextInput onChangeText={onChangeText} />

onChangeText => 입력값 저장할 수 있는 기능.

autoCapitalize="words"

 

——————3.3 To Dos——————

 

onSubmitEditing={addTodo} => submit 누르면 이벤트 발생

 

Object.assign 객체 컴바인해주기!

const toDos = {}

toDos[Date.now()] = {work: false}

Object.assign({}, toDos, {[Date.now()]: {work: true}})

 

toDo를 변형시키지 않고 새로운 toDos 만들기

const [toDos, setToDos] =useState({}) //array 아니고 object로, hashmap으로 저장.

const addTodo = () => {
    if(text=== ""){
    	return;
    }
	const newToDos = Object.assign({}, toDos, {
		[Date.now()]: {text, work: working}
	})
    setToDos(newToDos)
	setText("")
}

 

——————3.4 Paint To Dos——————

 

Object.assign 대신 es6 문법인 … 사용할 수도 있다.

 

const newToDos = {...toDos,
	[Date.now()]: {text, work: working}
}

자동완성기능 활성화로, 자꾸 입력값이 아닌 다른 값이 저장됨.

비활성화 시키기 

autoCorrect="false"

https://reactnative.dev/docs/textinput#autocorrect

 

Object.keys(x) => object key들의 array를 보여줌

 

——————3.5 Persist——————

 

Work 일때, Travel 일때 보여주는 리스트 다르게 설정. working true or false 활용.

<ScrollView>
	{Object.keys(toDos).map((key) => (
		toDos[key].work === working ? 
		<View style={styles.toDo} key={key}>
		<Text style={styles.toDoText}>{toDos[key].text}</Text>
		</View> : null
		)
	)}
</ScrollView>

 

todo list 상태 저장하려면, expo의 AsyncStorage 모듈 이용!

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

 

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

const STORAGE_KEY ="@toDos";

useEffect(()=> {
    loadToDos()
}, [])

const saveToDos = async (toSave) => {
	await AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(toSave));
};

const loadToDos = async() => {
	const s = await AsyncStorage.getItem(STORAGE_KEY);
	setToDos(JSON.parse(s));
};

 

——————3.6 Delete——————

 

const deleteToDo = async(key) => {

    const newToDos = {...toDos}

    delete newToDos[key]

    setToDos(newToDos);

    await saveToDos(newToDos);

  }

 

——

prompt => iOS에서만 지원.

——

Alert 이용 삭제 여부 묻기

  const deleteToDo = (key) => {
    Alert.alert("Delete To Do", "Are you sure?", [
      { text: "Cancel" },
      {
        text: "Delete",
        style: "destructive",
        onPress: () => {
          const newToDos = { ...toDos };
          delete newToDos[key];
          setToDos(newToDos);
          saveToDos(newToDos);
        },
      },
    ]);
    return;
  };

 

——iOS에서만 지원

alert 버튼 style 추가

style: "destructive",

 

——————3.7 Recap——————

——————3.8 Code Challenge——————

 

미션 1. 앱 재실행시, 마지막 상태의 Work 또는 Travel 기억하기

그냥 재시작하면, Work 탭에서 시작하는데,

Travel로 어플 종료하면 Travel 기억해서 재시작 시 Travel로 시작하게 상태 기억하기

useEffect(()=> {
   saveTap(working)
}, [working])

const saveTap = async(toSaveTap) => {
    await AsyncStorage.setItem(TAP_KEY, JSON.stringify(toSaveTap));
  }

const loadTap = async() => {
	const t = await AsyncStorage.getItem(TAP_KEY);
	setWorking(JSON.parse(t))
  }

 

미션 2. todo 완료 기능

(✅ 아이콘 넣고, 클릭 시 완료되게) => object 에 완료여부 상태 넣어야 함. completed : true/false

https://github.com/jjugwen/RN-ToDo-App/commit/5e8a78e82a0042bbdc2d9e7d207e99d99d8f62c4(private으로 잠시 돌려놓았다.)

 

미션 3. Todo에 수정 기능 추가하기

3-1 수정기능추가

https://github.com/jjugwen/RN-ToDo-App/commit/93e73754c699051017a117115e7c589db104a446 (private으로 잠시 돌려놓았다.)

 

3-2 Update 수정 시 기존 text 입력창에 나오게 => defaultValue 이용

defaultValue={toDos[key].text}

Fix AsyncStorage item 없을 때 나타나는 오류 개선

새 디바이스에서 작동하는 경우, AsyncStorage에 아무것도 없어서 useEffect로 loadToDos()에 오류가 난다.

이를 개선하기 위해 loadToDos()에서 s &&를 추가하였다.

s && setToDos(JSON.parse(s));

여러 디바이스에서 오류가 나지 않는 걸 확인했는데, 만약 또 오류가 난다면,, 아래 문장을 적용해보자.. s !== null ? setToDos(JSON.parse(s)) : null;