[React] [Toy Project] Soo-Do-List

소개

React로 구현된 간단하고 직관적인 To Do List 애플리케이션입니다. 사용자가 편리하게 할 일을 추가하고 삭제할 수 있도록 UI가 간결하게 구성되어 있습니다. 또한, 모바일과 데스크톱에서 모두 잘 작동하도록 반응형으로 디자인되었습니다.

기능

• 새 작업 추가
• 작업을 완료됨으로 표시
• 작업 삭제
• 반응형 디자인

☄️ GitHub에서 소스 보기

돌아보며

• Components
  컴포넌트 분리가 아직 어렵다. 예로 들어, 모든 모달을 Modal.jsx 에서 관리하는 것이 좋은지, TinyModal.jsx와 TaskModal.jsx로 분리하는 것이 좋은지 모르겠다.

• Done
  Tiny나 Task에서 작업 목록 삭제하면 바로 Done으로 옮겨지는 부분에서 한참 헤맸다.
  Tiny&Task 클릭 시 로컬스토리지에 추가되도록 해두었기 때문에, Done으로 옮겨지는 부분도 로컬스토리지를 이용해야 한다고만 생각했다. 그러다 Tiny&Task 클릭 시 발생하는 이벤트 내부에 Done 작업 목록을 리렌더링하는 코드를 작성하는 방법이 떠올라 무사히 해결했다.

• Type
  type의 배경색상 변경 기능을 구현하고 싶었다. 하지만 작업 추가하는 모달 창에서 type 색상을 지정해주고, 그 색상을 로컬스토리지에 저장해 작업 목록에 전달하는 로직을 구현하지 못했다. 그래서 작업 목록에서 색상을 선택하면 변경되는 방법으로 했다.

Task.jsx & Tiny.jsx

 const updateItemColor = (id, color) => {
	const updatedItems = items.map((item) =>
		item.id === id ? { ...item, color } : item
	);
	setItems(updatedItems);
	localStorage.setItem("task", JSON.stringify(updatedItems));
};

- item.id 조건이 true인 경우  item객체의 모든 기존 속성을 복사한 다음 color 속성을 새로운 값으로 덮어씌운다

const item = {
    id: 2,
    type: "task",
    title: "Task 2",
    description: "Description 2",
    color: "blue"
};
const newColor = "red";
const updatedItem = { ...item, color: newColor };

- 스프레드 연산자를 사용하여 기존 item의 모든 속성을 복사하고, color 속성만 덮어씌운다

근데 업로드 하고 나니 변경된 type 색상이 로컬스토리지에 저장이 안되네..오류 수정 해야겠다

• Design
  "디자인 어렵다..!!"

☘️ 실력이 늘면 코드를 재정비해야 할 것 같다 끄읕~~!