10.2 일정관리 APP 만들기 (기능)

state 에 전체todos 만들기

App.js

import React,{useState} from 'react'
const App = ()=>{
  const [todos,setTodos] = useState([
    {
      id:1,
      text:'리액트기초 알아보기',
      checked:true
    },
    {
      id:2,
      text:'컴포넌트 스타일링하기',
      checked:true
    },
    {
      id:3,
      text:'일정 관리 앱 만들기',
      checked:false
    },
  ])
return (
    <div>
      <TodoTemplate>
        <TodoInsert/>
        <TodoList todos={todos}/>
      </TodoTemplate>
    </div>
  )
}

받아온 todos를 todo로 나눠서 TodoListItem으로 보내주기

TodoList.js

import TodoListItem from './TodoListItem'
import './TodoList.scss'

const Todolist = ({todos}) =>{
  return (
    <div className='TodoList'>
      {todos.map(todo=>(
        <TodoListItem todo={todo} key={todo.id} />
      ))}
    </div>
  )
}
export default Todolist

TodoList에서 todos를 받아와서 map() 을 이용해 todoListItem에 보내주기

받아온 todo 의 내용 보여주기

TodoListItem.js

import cn from 'classnames'

const TodoListItem= ({todo})=>{
  const { text, checked }= todo
  return (
    <div className='TodoListItem'>
      <div className={cn('checkbox',{checked})}>
        {checked? <MdCheckBox/>:<MdCheckBoxOutlineBlank/> }
        <div className='text'>{text}</div>
      </div>
      <div className='remove'>
        <MdRemoveCircleOutline/>
      </div>

    </div>
  )
}
export default TodoListItem

• check 가 되어있는지 확인 → 아이콘 바꾸고, {cn('checkbox' , true)} false인지 class로 저장

항목 추가 기능 구현하기

TodoInsert.js

import { useState, useCallback } from 'react'

const TodoInsert= ()=>{
  const [value,setValue] = useState('')
  const onChange = useCallback(e=>{
    console.log(e.target.value)
    setValue(e.target.value)
  },[]);

  return (
    <form className='TodoInsert'>
      <input 
        placeholder='할 일을 입력하세요'
        value={value}
        onChange={onChange}
        />
      <button type='submit'>
        <AiFillApple/>
      </button>

    </form>
  )
}
export default TodoInsert

• value를 useState로 입력을 관리하고
• onChange 함수를 useCallback Hook을 사용해서 한 번 함수를 만들고 재사용할 수 있도록 한다. useCallback(()⇒{...},[]) == 컴포넌트가 처음 렌더링될 때만 함수 생성
  

todos 배열에 새 객체 추가하기

App.js

import React,{useState,useCallback,useRef} from 'react'

const nextId = useRef(4)
const onInsert = useCallback(
  text=>{
    const todo = {
      id:nextId.current,
      text,
      checked:false
    };
    setTodos(todos.concat(todo))
    nextId.current+=1;
  },
  [todos]
)
return ( ...)

<TodoInsert onInsert={onInsert}/>

• onInsert 함수 만들기
  • useCallback 으로 감싸 컴포넌트의 성능을 아낄 수 있다.
  • props로 전달해야 할 함수를 만들 때는 useCallback을 사용하는 것이 좋다.
  • 함수를 만든 뒤에는 해당 함수를 TodoInsert 컴포넌트의 props 로 설정해 주기
• id 값은 useRef 를 이용해서 관리 const nextId = useRef(4)
  • 왜 ref? id 값은 렌더링되는 정보가 아니기 때문에 값이 바껴도 리렌더링 될 필요가 없다.
  • 그저 참조값이라서!

TodoInsert에서 onSubmit 이벤트 설정하기

TodoInsert.js

const TodoInsert= ({onInsert})=>{
  const [value,setValue] = useState('')
  const onChange = useCallback(e=>{
    setValue(e.target.value)
  },[]);
  const onSubmit = useCallback(
    e=>{
      onInsert(value)
      setValue('')
      e.preventDefault();
    },
    [onInsert,value]
  )
<form className='TodoInsert' onSubmit={onSubmit}>

• onSubmit 이라는 함수를 만들고 , form 의 onSubmit으로 설정 해준다 .
• 이 함수가 호출 되면 props로 받아온 onInsert 함수에 현재 value 값을 넣어서 호출하고
  • 받아온 onInsert 함수에서 value 값을 App.js 에서 text 로 받아 todo를 만들고 추가해준다
  • setValue로 value를 초기화한다.
  • e.preventDefault(); 를 사용해서 새로고침을 방지
• onClick 이벤트로 만들어도 되는데 굳이 onSubmit 으로 한 이유가 뭔가요?
  • click 뿐 아니라 enter로 들어올 수 있기 때문이다

지우기 만들기

App.js

const onRemove = useCallback(
  id =>{
    setTodos(todos.filter(todo=> todo.id!== id))
  },
  [todos]
)
<TodoList todos={todos} onRemove={onRemove} />

• id를 파라미터로 받아와서 같은 id를 가지는 항목을 todos 에서 지우는 함수를 만든다
• 이 함수를 TodoList의 props로 설정해 준다 → props로 보낼 함수는 useCallback 사용!

TodoList.js

<TodoListItem todo={todo} key={todo.id} onRemove={onRemove} />

TodoListItem.js

const {id, text, checked }= todo
<div className='remove' onClick={()=>onRemove(id)} >

완료버튼 만들기

App.js

const onToggle = useCallback(
  id=>{
    setTodos(
      todos.map(todo=>
        todo.id === id ? {...todo,checked:!todo.checked} : todo),
    )
  },[todos]
)
<TodoList todos={todos} onRemove={onRemove} onToggle = {onToggle}/>

todos.map(todo=>todo.id === id ? {...todo,checked:!todo.checked} : todo))

• id 로 받아오는데 그 아이디 인거는 checked를 바꿔주고 아닌건 그대로 둔다

TodoList.js

<TodoListItem todo={todo} key={[todo.id](http://todo.id/)} onRemove={onRemove} onToggle={onToggle}/>

TodoListItem.js

const TodoListItem= ({todo,onRemove,onToggle})=>{
<div className={cn('checkbox',{checked})} onClick={()=>{onToggle(id)}}>```