노마드 코더 REACT NATIVE 강의 코드챌린지

https://nomadcoders.co/react-native-for-beginners

왕초보를 위한 React Native 101 – 노마드 코더 Nomad Coders

 

이번 글은 강의 마지막에서 나왔던 코드 챌린지를 해결한 과정을 다룬다.

 

스스로 구현해야 했던 세 가지 기능:

1. 앱 재실행 시 마지막 상태의 Work 또는 Travel 기억하기
2. Todo에 완료 기능 추가하기
3.Todo에 수정 기능 추가하기

현재 카테고리(Work / Travel) 저장

 

앱을 켤 때 마지막으로 선택했던 카테고리를 기억하고 다시 불러오는 기능. 이걸 구현하려면 카테고리 상태를 AsyncStorage에 저장해야 하는데, 비동기 처리이기 때문에 useEffect를 활용해서 앱이 처음 실행될 때(마운트 시점) 불러오도록 했다.

// 카테고리 저장하는 함수
const saveCategory = async () => {
  try {
    await AsyncStorage.setItem("@Category", JSON.stringify(working));
  } catch (e) {
    alert("현재 카테고리 저장하다가 에러남");
  }
};

// 카테고리 불러오는 함수
const loadCategory = async () => {
  try {
    const c = await AsyncStorage.getItem("@Category");
    setWorking(JSON.parse(c));
  } catch (e) {
    alert("현재 카테고리 불러오다가 에러남");
  }
};

 

앱이 실행되면 loadCategory()가 실행돼서 마지막에 선택한 "Work" 또는 "Travel" 카테고리를 불러오고, 새로운 카테고리를 선택하면 saveCategory()로 저장된다. 이렇게 하면 앱을 껐다 켜도 마지막에 선택한 카테고리가 그대로 유지된다.

 

할 일 완료 기능

 

할 일을 끝냈다면 완료로 표시할 수 있는 기능을 추가했다. 체크박스를 누르면 완료 상태가 바뀌고, 완료된 항목은 취소선이 그어지고 투명도도 낮아지게해서 구분이 잘 가게 만들었다.

const finishTodo = (key) => {
  const newToDos = { ...toDos, [key]: { ...toDos[key], finish: !toDos[key].finish } };
  setToDos(newToDos);
};

 

finishTodo 함수는 해당 항목의 finish 상태를 반전시키는 방식으로 구현했다. 완료된 할 일은 다시 미완료 상태로 바꿀 수도 있도록 했다.

 

 

할 일 수정 기능

 

이 부분이 조금 까다로웠다. 일단 할 일 리스트를 보여줄 때, 수정 모드인지 아닌지에 따라 텍스트와 텍스트 입력창을 바꿔 보여주게 구현했다. 수정 모드에선 TextInput으로 바뀌고, 이때 ref를 이용해 수정 모드로 들어가면 자동으로 포커스를 줬다.

const toggleEditTodo = (key) => {
  const newToDos = {
    ...toDos,
    [key]: { ...toDos[key], isEditing: !toDos[key].isEditing }
  };
  setToDos(newToDos);
  
  if (!toDos[key].isEditing) {
    setTimeout(() => {
      editInputRefs.current[key]?.focus();
    }, 0);
  }
};

 

수정 버튼을 누르면 isEditing 상태를 토글로 바꾸고, TextInput에 포커스를 주는 건 setTimeout을 이용했다. 포커스는 바로 안 주면 반응이 느려서 살짝 딜레이를 준 것이다.

그리고 입력이 완료되면, 입력된 텍스트를 editTodo() 함수에서 받아서 해당 할 일을 업데이트하고 수정 모드를 종료한.

 

const editTodo = (key, updatedText) => {
  const newToDos = {
    ...toDos,
    [key]: { ...toDos[key], text: updatedText, isEditing: false }
  };
  setToDos(newToDos);
};

 

 

 

마무리

 

마무리하며 실제 스크린샷과 깃허브 링크를 남긴다.

 

https://github.com/sjpark1120/nomad_react_native

GitHub - sjpark1120/nomad_react_native: 노마드코더 리액트네이티브 강의들으며..