47일차 TIL : todolist

학습내용

• delete, done/cancel 버튼 구현
• 인풋 자동 포커싱

🔗 Github
🔗 홈페이지

delete, done/cancel 버튼

const Todolist = () => {
  .
  .
  .
  // delete 버튼
  const delBtn = (event, id) => {
    event.stopPropagation();
    if (window.confirm("정말 삭제하시겠습니까?")) {
      return dispatch(deleteTodo(id));
    }
  };

  // done/cancel 버튼
  const updateBtn = (event, id) => {
    event.stopPropagation();
    dispatch(updateTodo(id));
  };

  return (
    <>
    .
    .
    .
      <ButtonArea>
        <Button onClick={(event) => updateBtn(event, item.id)}>
        done
        </Button>
        <Button onClick={(event) => delBtn(event, item.id)}>
        delete
        </Button>
      </ButtonArea>
       	 );
        }
      })}
	</>

이번 과제에서 가장 많은 시간을 할애한 부분이다. 버튼을 누르면 버튼에 해당하는 리스트의 id값을 가져와서 dispatch로 전달해야 하는데 자바스크립트 기초가 부족한 탓에 특정 리스트의 id만을 반환하는 게 쉽지 않았다.

입문 단계에서는 <List>에 id={item.id}로 id를 할당해서 delBtn의 매개변수로 가져오는 방식을 사용했었는데 이번 과제에서는 그 방법을 사용할 수가 없었다. 버블링 현상이 발생하는 바람에 버블링을 방지하기 위해 event를 매개변수로 가져왔기 때문이다.

그래서 어떻게 해야하나 오랜 시간 고민 하다가 안풀려서 튜터님을 찾아갔는데 아주 간단한 방법이었다

2개의 매개변수가 필요하다면?

2개의 매개변수를 넣어주면 된다.

인풋 자동 포커싱

  // 인풋 자동 포커싱
  const focusDate = useRef();
  const focusTodo = useRef();

  // 투두리스트 추가
  const addBtn = () => {
    if (!date) {
      alert("빠진 내용이 없나 확인해보세요.");
      focusDate.current.focus();
    } else if (!todo) {
      alert("빠진 내용이 없나 확인해보세요.");
      focusTodo.current.focus();
    } else {
      setDate("");
      setTodo("");
      dispatch(
        addTodo({
          id: uuid(),
          date,
          todo,
          isDone: false,
        })
      );
      focusDate.current.focus();
    }
  };

렌더링이 될 때마다 날짜칸에 포커싱이 되도록 기본적으로 autoFocus 속성을 추가한 상태다. 여기에 버튼을 클릭하거나 혹은 내용을 일부만 작성하고 클릭했을 때 작성하지 않은 칸에 자동 포커싱이 되도록 useRef()를 사용했다.

---

보완점

• 컴포넌트명 변경

• 인풋 date 날짜 형식 검증

• 인풋 alert switch/case문으로 구현

• 리스트에 cursor: pointer 추가

• filter()로 투두리스트/완료리스트 필터링

• 리스트 date 정렬

• 상세페이지 링크 {´&item.id´} 형식 사용

• state로 데이터에 접근할 때는 모듈까지만 반환

---

과제 리뷰 때 공개처형을 당해버리고 말았다.... 비록... 수치스러웠지만 상세한 피드백을 받았기 때문에 그만한 가치가 있던 수치심이었다. 원장님 피드백을 바탕으로 주말에 추가로 수정해봐야겠다.