💻[React Native] Expo로 TodoList 만들기5-AsyncStorage

📌 AsyncStorage

list에 대한 부분들을 저장할 수 있도록 하는 기능
expo install @react-native-async-storage/async-storage
비동기로 동작, key+value(둘다 string! 변한해야 함)로 구성된 단순 storage
key, value로 동작하므로 한 api로 호출이 가능

//입력 처리
 const addItem = useCallback(() => {
    const newData = [
      ...list,
      { key: new Date().toString(), content: inputText },
    ]; 
   //입력한 데이터를 원래 list 안의 값과 함께 key, content 값으로 나타냄
    setList(newData);
   //입력한 데이터를 setList에 포함
    AsyncStorage.setItem("todo-list", JSON.stringify(newData));
   //AsnycStorage에 todo-list라는 key와 newData라는 value를 string화해서 저장
   setInputText("")
  }, [list, inputText]);
//AstncStorage 안의 data를 불러옴 (getItem)
 useEffect(() => {
    AsyncStorage.getItem("todo-list").then((rawData) => {
      if (rawData) {
        setList(JSON.parse(rawData));
      } else {
        setList([]);
      }
    });
  }, []);

//삭제 처리
const removeItem = useCallback(
    (key) => {
      const newData = list.filter((item) => item.key !== key);
      setList(newData); //삭제 후 Stroage에 넣어줌
      AsyncStorage.setItem("todo-list", JSON.stringify(newData));
    },
    [list]
  );

겹치는 부분 function으로 묶어서 간단하게 처리

function updateStorage(data) {
  return AsyncStorage.setItem("todo-list", JSON.stringify(newData));
}

export default function App() {
  const [list, setList] = useState([]);
  const [inputText, setInputText] = useState("");
  const addItem = useCallback(() => {
    const newData = [
      ...list,
      { key: new Date().toString(), content: inputText },
    ];
    setList(newData);
    updateStorage(newData);
    setInputText("");
  }, [list, inputText]);

  const removeItem = useCallback(
    (key) => {
      const newData = list.filter((item) => item.key !== key);
      setList(newData);
      updateStorage(newData);
    },
    [list]
  );

  useEffect(() => {
    AsyncStorage.getItem("todo-list").then((rawData) => {
      if (rawData) {
        setList(JSON.parse(rawData));
      } else {
        setList([]);
      }
    });
  }, []);

⚡️ 완료에 대한 상태를 효율적으로 어떻게 관리하는가?

📌 React 불변성 (immutable)

원본을 변경하지 않는다, 반드시 변경된 사본을 통해 비교한다
무엇이 변경되었는 지를 통해 변경된 부분을 찾아낸다
array.filter: 원본은 변경되지 않음, 사본을 생성, 추려내어 비교
array.push(): 원본을 변경함

immer

js의 기본 state를 다루는 것
draft: 변경을 얼마든지 할 수 있는 초안

//App.js
import produce from "immer";

const updateItem = useCallback((key, value) => {
      const newData = produce(list, (draft) => {
        const index = list.findIndex((item) => item.key === key);
        draft[index].isDone = value;
      });
      setList(newData);
      updateStorage(newData);
    },
    [list]
  );

   <TodoItem
              id={item.item.key}
              label={item.item.content}
              isDone={item.item.isDone}
              onSwitchChange={updateItem}
              onDelete={() => removeItem(item.item.key)}
            />
          )}
          style={{ flex: 1 }}
        />

//TodoItem.js
export default function TodoItem({ label, onDelete,
isDone, onSwitchChange }) {

  return (
    <Row style={{ alignItems: "center", marginBottom: 12 }}>
      <Switch
        value={isDone}
        onValueChange={(value) => onSwitchChange(id, value)}
        valuestyle={{ marginRight: 8 }}
      />
      <Text style={{ color: isDone ? "#eee" : "#000" }}>
        {label ?? "내용 없음"}
      </Text>
      <Button title="삭제" onPress={onDelete} />
    </Row>
  );
}

switch 변경이 되어도 변경된 내용이 storage에 잘 update됨
array, object 등이 들어가면 상태를 관리하는 것에 대한 도입이 필요