[React] To-do List 만들기 (2023.05.23)

🎈 구성하기

📖 컴포넌트

1. TodoList

2. TodoItem

3. TodoInput

 

📖 컨텍스트 - TodoContext

전역적으로 사용할 값

1. todos : 내용, 완료여부 (객체로 저장)

2. newTodo : 내용

 

🎈 코드 작성하기 (순서)

1) 화면에 첫 Todo 보이게 하기

컴포넌트 연결

컨텍스트 연결

컨텍스트로 사용할 값 state로 저장 후 초깃값 지정하여 출력되도록 

 

2) 입력창에 글씨를 입력하면 newTodo에 저장

handleNewTodo()

 

3) Add 버튼클릭시 Todos에  newTodo 객체 추가, input 텍스트 창 공백으로 

addNewTodo()

 

4) add 버튼 클릭시 추가된 객체 화면에 띄우기

addNewTodo()

 

5) delete 클릭하면 해당 리스트 삭제

deleteTodo()

 

6)  체크 박스 체크되면 취소선 표시

handleCheck()

 

🎈 코드

📖 App.js

import { useState } from 'react';
import './App.css';
import TodoInput from './components/TodoInput';
import TodoList from './components/TodoList';
import { TodosContext } from './context/TodosContext';

function App() {

  const [ todos, setTodos ] = useState([{text : '첫 Todo', completed : false}])
 
  const [ newTodo, setNewTodo ] = useState('')

  const handleNewTodo = (e)=>{
    setNewTodo(e.target.value);
  }

  const addNewTodo = ()=>{
    setTodos([...todos, {text : newTodo, completed : false}])
    setNewTodo('')
  }

  const deleteTodo = (index)=>{
    const newTodos = [...todos];
    newTodos.splice(index, 1);
    setTodos(newTodos);
  }

  const handleCheck = (index)=>{
    const newTodos = [...todos];
    newTodos[index].completed = !newTodos[index].completed;
    setTodos(newTodos);
  }

  return (
    <TodosContext.Provider value={{todos, setTodos, newTodo, setNewTodo, handleNewTodo, addNewTodo, deleteTodo, handleCheck}} >
      <div>
        <h1>Todo List</h1>
        <TodoList />
        <TodoInput />
      </div>
    </TodosContext.Provider>

  );
}

export default App;

 

📖 TodosContext.js

 

import { createContext } from "react";

export const TodosContext = createContext(null);

 

📖 components 1. TodoList.jsx

 

import React, { useContext } from 'react'
import TodoItem from './TodoItem'
import { TodosContext } from '../context/TodosContext'

const TodoList = () => {

    const { todos } = useContext(TodosContext)

  return (
    <div>
        {todos.map((item, idx)=>(
            <TodoItem key={item.text+idx} index={idx} todo={item}/>
        ))}
    </div>
  )
}

export default TodoList

 

📖 components 2. TodoItem.jsx

 

import React, { useContext } from 'react'
import { TodosContext } from '../context/TodosContext';

const TodoItem = ({index, todo}) => {

    const { deleteTodo, handleCheck } = useContext(TodosContext);

  return (
    <div>
        <input id="todo-item" type="checkbox" onChange={()=>{handleCheck(index)}} />
        <lable htmlFor="todo-item" style={{
            textDecoration: todo.completed ? "line-through" : "none"
        }}>{todo.text}</lable>
        <button onClick={()=>{deleteTodo(index)}}>Delete</button>
    </div>
  )
}

export default TodoItem

 

📖 components 3. TodoInput.jsx

 

import React, { useContext } from 'react'
import { TodosContext } from '../context/TodosContext'

const TodoInput = () => {

    const {handleNewTodo, addNewTodo, newTodo} = useContext(TodosContext)

  return (
    <div>
        <input type="text" onChange={handleNewTodo} value={newTodo}/>
        <button onClick={addNewTodo}>Add</button>
    </div>
  )
}

export default TodoInput

🎈 참고사항

 

- handleTodoAddition 이라는 함수를 생성 
   => 기존에 있던 todos 에 newTodos 라는 값을 추가 
   => ** state를 누적시키는 방법! 
   => const [txt, setTxt] = useState("하이") 
      Q. 하이 => 바이 
      setTxt("바이"); 
      
      Q. 하이 => 하이하이 
      setTxt([...txt, "하이"]) 

   => 기존에 있던 todos에 newTodo 를 더해보면? 
   setTodos([...todos, {text : newTodo , completed : false }])

 

/* 
    [에러 읽어보기!]
    
    useState is not defined 
    useContext is not defined 
    =>  import 안해줘서 나는 오류 

    ck is no defined 
    => ck 라는 함수, 혹은 변수를 설정하지 X 
    
    React Hook "useState" cannot be called at the top level. 
    => use ~ 리액트 훅은 반드시 컴포넌트 내에 작성 
*/