[React] Todolist 클론코딩 ➀ 기능 구현

📒 Intro

1. velopert님의 Todolist UI만을 보고 구현
2. 내가 짠 거랑 velopert님 꺼랑 소스코드 비교

📌 기본 동작 원리

무지성으로 컴포넌트 두개...

📌 오늘 날짜 들고 오기

let today = new Date(); 
  let year = today.getFullYear();
  let month = today.getMonth() + 1;
  let date = today.getDate();
  let day = today.getDay();
  const weekday = ['일','월','화','수','목','금','토'];
  return (
    <div>
        <h1>{year}년 {month}월 {date}일</h1>
        <h2>{weekday[day]}요일</h2>
	</div>
);

📌 CRUD 기능 추가

CREATE, DELETE 만 있어서 두 개만 구현함.

• CREATE
  Enter -> 입력 -> input 창 초기화(오류)

const onCreate = (e) => {
    var newTodos= [...todos];
    newTodos.push({ text:e.target.value, active:false});
    if(e.key=='Enter'){
      setTodos(newTodos);    
      // setInputValue(''); (오류) 첫 입력후 inputValue값이 null로 고정됨      
    }   
  } 

• Delete
  button Click event -> 삭제

 const onRemove = (e) => {
    setTodos(todos.filter(todo => todos.indexOf(todo) !== Number(e.target.id)));    
  }

📌 남은 할 일 보여주기

const undoneTasks= useMemo(() => {
    return todos.filter((todo) => !todo.done).length
  },[todos]);

📌 마주친 오류들

• TypeError : items.map is not a function.
  • 오브젝트는 map()함수를 가지고있지 않아 사용할 수가 없다. 배열만 가능하다.
  • 원인 : newItems += e.target.value;
  • 해결 : newItems.push(e.target.value);
  • 이상한 점 : setItems(prev => [...prev+e.target.value]) 하면 글자 하나씩 배열에 들어감
  • 참고
• JSX expressions must have one parent element
  • 원인 : 여러 개 요소를
    나 fragement로 감싸지 않음
  • 이유 : 여러개의 요소를 하나의 요소로 감싸주는 이유는 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 하는 규칙이 있기 때문이다.
  • 참고
• filter -> button의 key를 item의 index로 할당해서 나중에 key랑 item의 index를 비교해서 삭제할려고 했는데 안됨.
  • 원인 :
    typeof(e.target.id) = string typeof(items.indexOf(item)) = number
  • 해결 : items.indexOf(item) !== Number(e.target.id)
• li태그를 checkbox type인 input으로 바꾸고 li 내용을 value로 넣으니까 화면상에 아무것도 보이지 않음
  • 코드 : <input value={item} type="checkbox" key={index} />
  • 해결 :

    <input id={index} type="checkbox" />
    <li type="checkbox" key={index} style={{display:"inline-block"}} >{item}</li>

  • 참고
• Objects are not valid as a React child 에러 처리
  • 원인 : source data인 Followings가 데이터타입이 array인데, 각 요소(여기서는 item, 데이터 타입은 Object)객체를 그대로 렌더링 하려고 했기 때문에 에러가 발생하였다.
    즉, Object데이터를 그대로 렌더링 하려고 했기 때문에 에러가 발생한 것이다.
    - 참고
• input 에 type="checkbox" value={items[index].text}했는데 화면에 value값 표현되지 않음
  • 원인 : ?

📌 원본에 없는 기능 추가 (추후 구현)

• 예외처리 : input값이 비어있으면 입력되게 하지 않기
• Update랑 Read 기능 추가