[개인 Project] My To-Do List -React페이지 보완하기 (추가,삭제,완료버튼+날짜입력 및 오름차/내림차순 정렬 과제하기)

240129 월 TIL ✍

첫 화면

리뉴얼 !

 

저번주에도 my todo list 과제를 하고나서 따로 개선해보고. 과제 답안과도 비교해보며 또 새로 배우고 -

베이직반 2차 과제로도 기존 내 my todo list 페이지를 보완해야 했었다. 

component를 분리했던 방식도, 좀 더 세분화해서 컴포넌트화해줬다. 그 과정에서 props 등 새로 다시 내려줌

 

또 이번에는 움짤로 만들어 보았따 !!

생각보다 만들기 어려웠다.. obs스튜디오로 직접 화면녹화하고 또 잘라서 gif로 변환하고,

gif변환 사이트 프로그램도 어떤 건 안되고 어떤 건 화질이 너무 안좋게 나오고 (내가 하는 법을 잘 몰라서인걸지도)..

여튼 그래도 GifCam 프로그램 (가볍고 간편한 무료 gif짤 생성 프로그램인데, 기존의 동영상을 변환하지는 못하고, 바로 캡쳐,녹화?하는 식으로 생성한다. 근데 용량,프레임에 비해 화질 안깨지고 잘 나옴!!) 을 통해 완성 !!! 

 

(+ vercel을 통한 리액트 사이트 배포 - URL : https://my-to-do-list-ecru.vercel.app/)

 

---

저번 글에서 말했듯 전반적으로 useState hook 과, 컴포넌트 분리 및 props 내려주는 방식에 초점을 맞추고 과제를 했다.

실제 과제를 하면서 실습해보니 헷갈리는게 더 생기고, 쉽지 않았다 ㅠㅠ

하지만 한번 하고 다시 보완해가면서.. 컴포넌트 구조 그림도 그려가며 복습하니까 이제 컴포넌트 분리와 props 사용은 감이 잡혔다.

 

 

 

- 근데 은근 useState 사용이 헷갈린다. 이걸 state 를 써야할지 모르겠는 부분도 있었다.

상태가 바뀌는 것, '렌더링' 되는 것에 써야한다는 사실은 알지만.

(과제 처음에 하면서 done도 useState로 쓰려고 했었닷..)

 

 

---

* 추가하기 버튼

form- input태그 (제목, 내용) 유효성 검사 및 추가하기 버튼 기능 / 추가하기 버튼으로 제출되면, input태그 초기화시켜줌 (제목,내용 안 채운 경우 초기화없이 내용 유지시켰다)

 

- 이 과제에서는 title, content, deadline, sortOrder를 state로 썼다.

그럼 input태그를 통해 받는 value값을, useState를 통해 선언한 set..메서드를 써서 event.target.value 와 같이 가져와서 setting해주면 된다.  (이를 통해 '추가하기' 버튼 기능 구현!)

아래 예시와 같이! (input태그에서 value와 onChange 속성은 짝꿍처럼 생각하기!)

  const [title, setTitle] = useState("");
   
 // input의 value값 가져오기
 // 아래 함수는 input태그의 onChange 속성에 넣어줄 함수
  const handleTitleInputChange = (event) => {
    setTitle(event.target.value);
  };

 

- 그리고 고유한 id 부여를 해야할 경우에는 , Date.now() 등도 있지만, 

저번에 배운 crypto.randomUUID()  기억 잘해두고 써먹자! ! (대신 보안이 불안정? 안좋은 환경에선 잘 안될 수 있다고)

 

* 삭제 버튼

- 삭제 버튼 기능도 잘 동작하는데, 짤이 없닷...ㅎ 귀찮으니 패스..

 삭제 버튼 기능은 todolist에 filter 배열 메서드를 통해, 삭제버튼을 누른 해당 카드의 id와 일치하는 todo만 빼고 나머지를 배열에 담아 다시 setting (useState통해) 해줌으로써 작동시켰다.

- 이 과제에서는 title, content, deadline, sortOrder를 state로 썼다.

그럼 input태그를 통해 받는 value값을, useState를 통해 선언한 set..메서드를 써서 event.target.value 와 같이 가져와서 setting해주면 된다.  (이를 통해 '추가하기' 버튼 기능 구현!)

아래 예시와 같이! (input태그에서 value와 onChange 속성은 짝꿍처럼 생각하기!)

 

 

---

* 완료, 완료 취소 버튼

완료, 완료 취소 버튼 기능

 

- 어려웠고 처음에 구현하지 못했던.. 완료, 완료취소 버튼 기능 ㅠㅠ 

아래와 같이 보완을 했다. 

완료 <-> 완료 취소 !  toggle식으로 반대로- 전환해주면 된다고 생각하니 생각보다 간단했다.

기존의 todolist 항목들을 map으로 돌리고, 하나씩 뽑은 todo 중에서..

인자로 받은 id와  todo의 id가 일치하는 경우,  isDone(완료) 키 부분에 대한 밸류값만 변경해주면된다. 반대로 (!)

 

(여기서 주의할게, {...todo,   } 부분!  스프레드(전개)연산자 (...) 로 꼭 나머지 객체 부분을 풀어준 후에   isDone에 대한 밸류값을 변경해줘야한다. 그냥 isDone: ~ 만 달랑 쓰면 안됨) 

  // Done 완료&완료취소 버튼 (토글)=> 해당id의 todo 의 key값, isDone의 value값을 false <-> true 로 변경해야
  const onToggleTodoItem = (id) => {
    // 개선: 위와 마찬가지로 set..()안 콜백함수 /
    setTodoList((prevTodos) =>
      prevTodos.map((todo) => {
        if (todo.id === id) {
          return { ...todo, isDone: !todo.isDone };
        }
        return todo;
      })
    );
  };

 

 

 

---

* 마감일 설정과 선택 x 시 '미정' 처리

마감일 선택 x 시 - '마감일 미정'으로 뜨게 함

 

- 마감일은 선택 안한 경우 '마감일 미정'으로 뜨게 했다. 

또 마감일 설정은 input type="date" 로 설정해서, 다른 제목,내용 input과 마찬가지로 value, onChange 속성을 활용하고 useState를 통해 가져온 value값을 setting해주는 식으로 했다. 

그리고

(입력받은 deadline_state 넘겨받은) TodoItem.jsx에서 카드 상에 마감일 나타낼 때는 아래처럼 코드를 써서 return문 안에서 {deadlineText} 를 써줬다.

(근데 아직 date객체.. 메서드 활용법은 확실히 잘 모르겠는데, 여튼 다른 year, day보다도-  month에서 "long"을 꼭 써줘야만 년-월-일 한글로 잘 떴다.)

let dateDeadline = "";
let deadlineText = "";
if (!deadline) {
    // 넘겨받은 deadline이 없는 경우
    deadlineText = "마감일 미정";
} else {
    dateDeadline = new Date(deadline).toLocaleDateString("ko-KR", {
      year: "2-digit",  // '24년'
      month: "long",
      day: "numeric",
    });
    deadlineText = dateDeadline + "까지";
}

 

 

---

* 마감일 순으로 정렬하기 (빠른 순, 느린 순 - 오름차, 내림차순)

마감일 순으로 보기 - 빠른 순, 느린 순 정렬 (오름차순, 내림차순)&nbsp; &nbsp;(근데 마감일 미정인 경우는 변동이없다.. 마감일 미정 여러개이면 한쪽에 같이 몰아둬야할듯)

 

 

- 마감일 순으로 오름차순, 내림차순 정렬하기 기능은 구현은 했는데.. 사실 좀 헷갈려서 다시 봐야 할 거 같다.

힌트를 참고해서 한거라 .. 😹

글고 일단 헷갈리는게, 날짜 가까운일 -> 먼 일 이   '빠른 순' 인데, 이게 오름차순이 아닌가? 했지만, 아래처럼 desc로 value값을 받고 sort메서드 쓴게 .. 빠른 순이라서. 흠 헷갈린다. 강의도 다시 들어봐야..

여기서 sortOrder 을 state로서 선언하고.. 다른 input과 마찬가지로 value값을 받아서 setting해준다. 

(이 경우 드롭다운 메뉴의 select 태그에서 option 설정되었을 때 value를 받는다)

 

일단 sort, 배열 정렬 메서드가 아직 헷갈려서..공부해야할거같다.

 

 

그리고 주석에도 썼듯이, 약간의 문제가 남아있다.

처음에 드롭다운 메뉴로 뜨는 '빠른 순'을 먼저 택하면 안 먹힌다거나,

마감일 미정 시 그 카드들은 아예 순서 정렬에서 무시가 되기때문에.. 다른 카드들은 정렬순으로 움직이는데 걔네만 망부석처럼 제자리에 있어서ㅋㅋ ㅠㅠ  차라리 한 쪽으로 몰아주는 식으로 정렬하도록 바꿔야 할 거 같다.

  // todoItem 정렬하는 함수
  // 미완성 -> ? / 작동하지만 처음에 '빠른순'을 먼저 택하면 안먹힘 (느린순했다가 눌러야)
  // 그런데 오름차순 asc가 마감일 느린순?
  // 마감일 입력x로 미정시, 그 카드들은 순서정렬자체가 안되는 문제 (그대로있음)
  const sortTodoItems = (order) => {
    const newOrderDeadline = [...todoList].sort((a, b) => {
      if (sortOrder === "asc") {
        // 다시 체크
        return new Date(a.deadline) - new Date(b.deadline);
      } else {
        // else안써도?
        return new Date(b.deadline) - new Date(a.deadline);
      }
    });
    // setSortOrder(newOrderDeadline); 작동하는데 셀렉트박스 눌린게 고정안됨
    setTodoList(newOrderDeadline); // 정렬된 todoitem으로 todolist 상태 업데이트
  };
  
  
  ...
  return (

     {/*내림차순 눌렀을때 잘 작동하지만 input선택해도 입력창안바뀜*/}
      <section className="order-section">
        <h3 className="orderTitle">마감일 순으로 보기</h3>
        <select value={sortOrder} onChange={handleSortOrderChange}>
          {/*드롭다운 목록*/}
          <option value="desc">빠른 순</option>
          <option value="asc">느린 순</option>
        </select>
      </section>
      
      ...