Project

App.js import { useState } from 'react'; import './App.css'; import Header from './components/Header/Header'; import TodoList from './components/TodoList/TodoList'; const filters = ['all', 'active', 'completed']; function App() { const [filter, setFilter] = useState(filters[0]); return ( ); } export default App; 아래의 두 코드는 같은 코드이다. setFilter(filter)} /> Header.jsx import React from 'react'; expor..

ToDoList.jsx import React, { useState } from "react"; import AddTodo from "../AddTodo/AddTodo"; import { v4 as uuidv4 } from "uuid"; import Todo from "../\bTodo/Todo"; export default function ToDoList() { const [todos, setTodos] = useState(initialState); const handleAdd = (todo) => setTodos([...todos, todo]); const handleUpdate = (updated) => setTodos(todos.map((t) => (t.id === updated.id ? upda..

yarn add react-icons https://react-icons.github.io/react-icons/search?q=trash import { HiTrash } from "react-icons/hi"; ⚠️import할때 react-icons/뒤에 사용하고자하는 아이콘의 접두사를붙여줄것.

uuid설치 yarn add uuid uuid import해오기 import { v4 as uuidv4 } from 'uuid'; uuid함수 호출하기 == 고유값 생성 onAdd ({ id: uuidv4(), text, status: 'active' }) ; 다음과 같이 고유한 아이디가 생성된 것을 알 수 있다.

ToDoList.jsx import React, { useState } from "react"; import AddTodo from "../AddTodo/AddTodo"; export default function ToDoList() { const [todos, setTodos] = useState(initialState); const handleAdd = (todo) => setTodos([...todos, todo]); return ( {todos.map((item) => ( {item.text} ))} ); } const initialState = [ { id: "123", text: "장보기", status: "active" }, { id: "124", text: "공부하기", status: "a..

map ToDoList.jsx import React, { useState } from "react"; export default function ToDoList() { const [todos, setTodos] = useState([ { id: "123", text: "장보기", status: "active" }, { id: "124", text: "공부하기", status: "active" }, ]); return; {todos.map((item) => ( {item.text} ))} ; } 1. initialState는 말 그대로 초기값일 뿐이고 state는 useState의 state에 저장된다. 그러므로 데이터를 참고할때는 useState의 state를 참고하자. {todos.map((item)..