TIL day7 🚩

야 너두 todolist만들 수 있어!.. (근데 이제 db연결도 가능해야...)

오늘도 역시나 노마드코더의 react영화웹을 들었는데..
이번회차는 todolist 만들기..
아니 모든 개발의 기본은 todolist인걸까나...
아무튼...

열심히 다 듣고 이제 TIL만 작성하면 끝! 이랬는데...
여김없이 다른 수강생 댓글을 보다가...

kingoxpo님 당신을 찾아내서!!
감사하다고 하고싶다..
나도 삭제기능 하러간다..
일단 간다..

일단 이전에 만들었던 todolist 참고하기

일단 전에 쓰던 삭제기능 도무지 모르겠음 ,,,
그거 코드 분석만 만 하루를 했는데 조또 모르겠어요,,
살려주세요,,,

백날 천날 봐도 모르겠어요...
살려줘,,,

import React, { useState, useEffect } from "react";

function useTodoList() {
  const [todoList, setTodoList] = useState([]);
  //todolist 추가하는 함수

  function addTodo(content) {
    if (!todoList.every((todo) => todo.content !== content)) {
      //추가전에 중복값 체크하는 부분
      alert("똑같은 할 일을 추가할 수 없습니다.");
      return;
    }
    setTodoList((oldTodos) => [...oldTodos, { content, done: false }]);
    //위에 if문에서 중복값 확인
  }

  function checkTodo(targetContent) {
    //check된 부분은 상태값 완료로 가져가기
    setTodoList((oldTodos) =>
      oldTodos.map((todo) =>
        todo.content === targetContent ? { ...todo, done: !todo.done } : todo
      )
    );
  }

  function deleteTodo(targetContent) {
    //삭제기능
    //deleteTodo 함수는 인자로 targetContent를 받습니다. 이 인자는 삭제를 하려는 할 일 항목의 내용입니다.
    setTodoList(
      (oldTodos) =>
        //기존꺼를 호출한다
        oldTodos.filter((todo) => todo.content !== targetContent)
      //oldTodos.filter를 사용하여 기존의 todoList 배열에서 삭제하고자 하는 할 일 항목을 제외한 새로운 배열로 반환합니다.
      //filter 함수 내부에서, 조건문을 사용하여 todo.content !== targetContent인지 검사합니다.
      //만약 todo.content(할 일 항목의 내용)과 targetContent(삭제하려는 항목의 내용)이 다르다면, 해당 todo 항목을 포함하고,
      //같다면 해당 todo항목을 배제하여 새로운 배열을 생성하는데 사용됩니다.
    );
  }

  return {
    todoList,
    addTodo,
    checkTodo,
    deleteTodo,
  };
}

function App() {
  const { todoList, addTodo, checkTodo, deleteTodo } = useTodoList();
  //변수로 앞에 함수들을 호출함useTodoList로 호출함

  const [todoInput, setTodoInput] = useState("");

  function handleChange(e) {
    setTodoInput(e.target.value);
  }

  function handleSubmit(e) {
    e.preventDefault();
    addTodo(todoInput);
    setTodoInput("");
  }
  //submit를 사용하면 addtodo가 된다
  const [selected, setSelected] = useState("all");
  //전제상태 지정하는 함수
  function handleSelect(e) {
    setSelected(e.target.value);
  }

  const [filteredList, setFilteredList] = useState(todoList);

  useEffect(() => {
    if (selected === "all") {
      setFilteredList(todoList);
    } else if (selected === "done") {
      setFilteredList(todoList.filter((todo) => todo.done === true));
    } else if (selected === "active") {
      setFilteredList(todoList.filter((todo) => todo.done === false));
    }
  }, [selected, todoList]);

  return (
    <div className="todo">
      <div className="top"></div>

      <form onSubmit={handleSubmit} className="form">
        <label>
          <h2>to do list</h2>
          <input
            type="text"
            name="newTodo"
            onChange={handleChange}
            className="input"
            value={todoInput}
          ></input>
        </label>

        <button type="submit">➕</button>
      </form>

      <div className="list">
        {filteredList.map((todo, i) => (
          <li key={todo.content}>
            <input
              type="checkbox"
              checked={todo.done}
              onClick={() => checkTodo(todo.content)}
            />
            {todo.content}
            <button onClick={() => deleteTodo(todo.content)}>x</button>
          </li>
        ))}
      </div>

      <select className="w150" onChange={handleSelect}>
        <option value="all">전체</option>
        <option value="active">진행 중</option>
        <option value="done">완료</option>
      </select>
    </div>
  );
}

export default App;

아무리 주석을 달고 단위별로 분석해도 모르겠단말야...
일단 리액트는 받는게 너무 너무 많어요...

argument며 props며 하
죽구싶다,

다른 수강생꺼 savage해서 삭제기능 구현하기

아무튼간에 어쩔 수 없이 기존에 있던 강의생의 코드를 참고했는데요,,,

const deleteBtn = (index) => {
    setToDos(toDos.filter((item, todoIndex) => index !== todoIndex));
  };
  const onSubmit = (event) => {
    event.preventDefault();
    if (toDo === "") {
      return;
    }

자꾸

export default App; Line 8:5:   'setTodos' is not defined  no-undef
                    Line 8:14:  'todos' is not defined     no-undef

이런 오류가 발생합니다,,
하 미치겟내,,, 이미 정의 되어있는데...

왜 그러는거야...

앗 내 실수,,

대소문자 구분못하는 나란 녀석 ;ㅋ

일단

삭제 가능한입니다...

등록순서대로 출력되게 수정

그런데말입니다,,,
전 등록한 순서대로 to do list가 등록되길 원했는데..
이상한 순서라니,,,

그래서

이 글을보고

 <ul>
          {toDos.reverse().map((item, index) => (
            <li key={index}>
              {item}
              <button onClick={() => deleteBtn(index)}>❌</button>
            </li>
          ))}
        </ul>

이렇게 작성했더니 그냥 값이 작은 순서대로 나오는거더라고요...

이렇게 쉬운 방법이 있었음다..
하..

import { useState } from "react";

function App() {
  const [toDo, setToDo] = useState("");
  const [toDos, setToDos] = useState([]);
  const onChange = (event) => setToDo(event.target.value);
  const deleteBtn = (index) => {
    setToDos(toDos.filter((item, todoIndex) => index !== todoIndex));
  };
  const onSubmit = (event) => {
    event.preventDefault();
    if (toDo === "") {
      return;
    }
    //toDo = "" state를 직접 수정할 수 없어서 함수를 사용해서 함수로 수정함 절대 이런식으로 직접적으로 함수를 수정하면 안댐
    setToDos((currentArray) => [...currentArray, toDo]); // 직접적으로 값을 수정하거나 함수를 넣을 수 있음 /그리고 배열을 함수로 받을꺼임
    //array [] 여기에 기존에 있는 어레이를 [new(새로운값,) 어레이명 ]이렇게하면 걍 이상한 값이 들어간 어레이댐
    setToDo(""); // setTodo는 value를 수정하는 기능이고 todoinput이랑 연결되어 있어서 input창 초기화가 가능하다 "" 빈문자열을 넣어줘야 인풋창 초기화 가능한.
  };

  console.log(toDo);
  console.log(toDos);

  return (
    <div>
      <h1>my to dos ({toDos.length})</h1>
      {/* js코드를 쓰기위해서는 이 주석처럼 {} 꼭 필수템 */}
      <form onSubmit={onSubmit}>
        <input
          onChange={onChange}
          value={toDo}
          type="Text"
          placeholder="write your to do."
        />
        <button>Add To Do</button>
        <hr />
        <ul>
          {toDos.map((item, index) => (
            <li key={index}>
              {item}
              <button onClick={() => deleteBtn(index)}>❌</button>
            </li>
          ))}
        </ul>
        {/* JS에서의 map기능  가지고 있는 배열의 각각의 elements들을 바꿀 수 있도록 해준다. */}
        {/* map은 [apple,banana, habana, oh nana].map(()이부분에 첫번째 argument로 현재의 item을 가지고 올 수 있음=> "hello")) 
        이렇게 작성하면 배열의 모든 elements들이 hello로 바뀜  */}

        {/* map은 [apple,banana, habana, oh nana].map((item)=> item.toUpperCase())) 
        이렇게 작성하면 배열의 모든 elements들의 첫번째 글자가 대문자로 바뀜 */}
      </form>
    </div>
  );
}
//  react.js는 component가 죽을 때도 코드를 실행할 수 있어용
export default App;

이상! 완료했는데 글쎄..

hsecode님의 velog

이렇게 css도 이쁘고 velog도 잘 쓰시다니..
자극받아서 저도 저럿캐 써볼렵니다.

오늘 이상.