[React] 함수형 업데이트 패턴 (최신 값 보장)

• 이전상태를 참조하는 함수형 업데이트를 사용할때, 해당 상태의 이전 값을 안전하게 참조하기 위해 매개변수를 사용한다.
• 매개변수를 사용하면 현재의 값이 아닌, 이전의 값을 가져온다.
• 직접 업데이트 배열을 사용하게 된다면 React 는 최신 상태를 보장하지 못할 수 있다.
• 이 매개변수는 개발자가 직접 선언하거나 초기화 할 필요 없이 React 가 이를 관리하며, 함수형 업데이트 패턴을 통해 이전 상태를 안전하게 참조하고 현재 상태의 값을 신뢰성 있게 참조하기 위한 메커니즘이다.

[ 예제 ]

---

import { useEffect, useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Calendar } from 'react-native-calendars';
import TodoList from './TodoList.js';
import AsyncStorage from '@react-native-async-storage/async-storage';

export default function App() {
  const [selectedDate, setSelectedDate] = useState(''); // 선택된 날짜 저장할 상태 변수
  const [todos, setTodos] = useState([]); // Todo 목록을 저장할 상태 변수

  // #region addTodo
  const addTodo = (newTodo) => {
    if (newTodo.trim() !== '') {
      setTodos((prevTodos) => [
        ...prevTodos,
        { id: Date.now().toString(), text: newTodo, date: selectedDate },
      ]);
    }
  };
  // #endregion

  const deleteTodo = (id) => {
    setTodos((prevTodos) => prevTodos.filter((todo) => todo.id !== id));
  };

  // 선택한 날짜와 todo 의 날짜가 일치한 것만 필터링
  const filteredTodos = todos.filter((todo) => todo.date === selectedDate);

  return (
    <View style={styles.container}>
      {/* 달력 컴포넌트 */}
      <Calendar onDayPress={onDayPress} style={styles.calenderWrap} />
      <Text style={styles.selectedDateText}>SelectedDate : {selectedDate}</Text>
      {/* TodoList 컴포넌트에 필터링된 Todo 목록과 추가 함수 전달 */}
      <TodoList
        onAddTodo={addTodo}
        todos={filteredTodos}
        onDeleteTodo={deleteTodo}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: '15%',
    // backgroundColor: '#000000',
    width: 'auto',
    borderWidth: 4,
    borderColor: '#ff0000',
  },

  calenderWrap: {
    // backgroundColor :'transparent',
  },

  selectedDateText: {},
});