TodoList

10.31~11.2 컴퓨터 블루스크린 및 버그 때문에 

React 기초 강의 못 보고 있다가.

11.3 개인과제 받고 강의 보기 시작

11.4 까지 유데미 강의 보면서 지급 받은 강의 크로스 체킹

과제 보니 state 및 props , 그리고 필수 조건을 가지고 구현

4일날 얼추 필요한 강의는 다 본 것 같고

하드 코딩으로 5일 새벽 2시30분 부터 6일 03시 까지 구현을 하려고 노력했으나

JS도 익숙치 않은 상태에서 낯설은 React 까지 하려니 

에러만 뜨고 진도가 안나가서

06일이 제출일이라 구현은 불가능이라 판단 깔끔히 포기

아침에 강의라도 다시 보자는 마인드로 다시 찬찬히 보니 

캠프측에서 지급한 강의 끝 내용에 

다 떠먹여주는 수준....

1시간? 도 안걸려서 구현 완료.

틸 쓰면서 개인과제 발제문 다시 보는데 

발제 도입부에 배운 내용으로 충분히 구현 가능하다는 글귀를 봤을 때

강의를 끝까지 안들은 내 잘못이네 ㅋㅋ

개인과제 하드코딩 하려고 노력하면서 실력이 많이 부족하다는 것을 체감.

클론 코딩 및 토이 프로젝트를 하면서 익숙해지려고 더 신경을 써야겠음 

  // --------------제목 내용 입렵 값

  const [todos, setTodos] = useState([

    { id: "", title: "", body: "", isDone: false },

  ]);

  const [title, setTitle] = useState("");

  const [body, setBody] = useState("");

  const titleHandler = (event) => {

    setTitle(event.target.value);

  };

  const bodyHanlder = (event) => {

    setBody(event.target.value);

  };

  // ------------------ 입력값 추가

  const addTodoHandler = () => {

    const newTodo = {

      id: todos.length + 1,

      title,

      body,

    };

    setTodos([...todos, newTodo]); //불변성을 유지하기 위해서

    setBody("");

    setTitle()

  };

  // ---------- 입력값 제거

  const clickRemoveButtonHandler = (id) => {

    const newTodos = todos.filter(function (todo) {

      return todo.id !== id;

    });

    setTodos(newTodos);

  };

  //------------- 포스트 위아래~

  const clickMoveButtonHandler = (id) => {

    const newTodos = todos.map((todo) => {

      if (todo.id === id) {

        return { ...todo, isDone: !todo.isDone };

      } else {

        return { ...todo };

      }

    });

    setTodos(newTodos);

  };