[React TodoList] 리액트 투드리스트 마무리 - 깃허브, 파일 정리

프로젝트 마무리

 

 

파일 정리

 

1. 컴포넌트 폴더 생성

컴포넌트는 Component 폴더로,
Scss는 Scss 폴더로 이동하기

 

2. App.js 수정

- bulk 데이터 수정

- useReducer => useState로 수정

import React , {useCallback, useRef, useState} from "react";
import TodoTemplate from "./Component/TodoTemplate";
import TodoInsert from "./Component/TodoInsert";
import TodoList from "./Component/TodoList";



const App = () => {
  const [todos,setTodos] = useState([
    {
      id :1,
      text : '리액트의 기초 알아보기',
      checked : true },
    {
      id :2,
      text : '리액트의 스타일링해 보기',
      checked : true },
    {
      id :3,
      text : '일정 관리 앱 만들어 보기',
      checked : false },
    {
      id :4,
      text : '리액트 컴포넌트 이해하기',
      checked : false },
    {
      id :5,
      text : '리액트 네이티브 기초 알아보기',
      checked : false },    
  ]);

  const nextId = useRef(6);

  const onInsert = useCallback(
    text => {
      const todo = {
        id : nextId.current,
        text,
        checked :false,
      };
      setTodos(todos=> todos.concat(todo))
      nextId.current +=1;
    },[],
  )
  const onRemove = useCallback(
  id => {
    setTodos(todos=> todos.filter(todo=>todo.id !== id))
  },[] 
  )
  const onToggle = useCallback(
    id => {
      setTodos(
        todos=> todos.map(todo => 
          todo.id === id ? {...todo, checked:!todo.checked}:todo,)
      )
    },[]
  )
  return (
  <TodoTemplate> 
      <TodoInsert onInsert={onInsert}/>
      <TodoList todos={todos} onRemove={onRemove} onToggle={onToggle} />
  </TodoTemplate>
  )
}

export default App;

 

 

 

깃허브 

https://judithhopps.github.io/TodoList/

React App