Reactとデータ構造：配列・リスト・ツリー・ハッシュテーブル・8日目

import React from 'react';
 
interface Todo {
  id: number;
  text: string;
  completed: boolean;
}
 
const initialTodos: Todo[] = [
  { id: 1, text: 'React 공부하기', completed: true },
  { id: 2, text: '자료구조 복습하기', completed: false },
  { id: 3, text: '블로그 글쓰기', completed: false },
];
 
function TodoList() {
  const [todos, setTodos] = React.useState<Todo[]>(initialTodos);
 
  return (
    <ul>
      {/* 배열의 map 함수를 사용하여 li 요소 배열 생성 */}
      {todos.map(todo => (
        // 각 항목에 고유한 key prop 전달이 필수!
        <li key={todo.id} style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
          {todo.text}
        </li>
      ))}
    </ul>
  );
}

// ❌ 잘못된 예시: 원본 배열 직접 수정
newTodos.push({ id: 4, text: '새 할일', completed: false });
setTodos(newTodos); // React가 변화 감지 못할 수 있음
 
// ✅ 올바른 예시: 스프레드 연산자로 새 배열 생성
setTodos([...todos, { id: 4, text: '새 할일', completed: false }]);
 
// ✅ 올바른 예시: filter로 항목 삭제
setTodos(todos.filter(todo => todo.id !== idToRemove));
 
// ✅ 올바른 예시: map으로 특정 항목 업데이트
setTodos(todos.map(todo =>
  todo.id === idToToggle ? { ...todo, completed: !todo.completed } : todo
));

        App.js
     /     |      \
Header  Footer  pages
  |        |      |
 Nav    Button - Home