JudithHopps JudithHopps

React TodoList 보완하기 많은 데이터 렌더링 생성하기 import React , {useCallback, useState,useRef} from "react"; import TodoTemplate from "./TodoTemplate"; import TodoInsert from "./TodoInsert"; import TodoList from "./TodoList"; function createBulkTodos() { const array = []; for(let i=1;i { const [todos,setTodos] = useState(createBulkTodos) const nextId = useRef(2500); const onInsert = useCallback( text => { co..

컴포넌트 체크 기능 구현하기 onToggle 구현하기 onToggle이란 클래스명에 있으면 삭제, 없으면 추가하는 것이다. App.js에서 todo 상태 사용하기 import React , {useCallback, useState,useRef} from "react"; import TodoTemplate from "./TodoTemplate"; import TodoInsert from "./TodoInsert"; import TodoList from "./TodoList"; const App = () => { (...) const onToggle = useCallback( id => { setTodos( todos.map(todo => todo.id === id ? {...todo, checked:!to..

컴포넌트 삭제 기능 구현하기 배열 내장 함수 filter 사용 const array = [1,2,3,4,5,6,7] console.log(array.filter(v=>v>3)) //[4,5,6,7] App.js에서 todo 배열에서 id로 항목 지우기 import React , { useState, useCallback } from "react"; import TodoTemplate from "./TodoTemplate"; import TodoInsert from "./TodoInsert"; import TodoList from "./TodoList"; const App = () => { (...) const onRemove = useCallback( id => { setTodos(todos.filter..

컴포넌트 기능 구현하기 리스트 화면에 출력 App.js에서 todo 상태 사용하기 import React , { useState } from "react"; import TodoTemplate from "./TodoTemplate"; import TodoInsert from "./TodoInsert"; import TodoList from "./TodoList"; const App = () => { const [todos,setTodos] = useState([ { id :1, text : '리액트의 기초 알아보기', checked : true }, { id :2, text : '리액트의 스타일링해 보기', checked : true }, { id :3, text : '일정 관리 앱 만들어 보기', ch..