🔍 프로젝트2. todolist

한 입 크기로 잘라 먹는 리액트 섹션 9- 프로젝트2. 투두리스트

UI 구현하기

<Header/>
<Editor/>
<List/>

로 나눈다.

기능 구현하기

mockData 잘 불러와지는지 확인한다.

항목을 추가하면 콘솔에 추가한 값이 찍히는 것을 볼 수 있다.

내가 추가한 개굴이라는 항목이 뜨는 것을 볼 수 있다.

항목 두개 이상도 가능하다. 하지만 둘다 모두 id값이 0이다.
id값이 다르게 나오게끔 수정이 필요하다!

useRef를 사용하여 id값을 다르게 해보면,

id마다 고유값을 가지도록 바뀐것을 확인할 수 있다.

빈 문자열을 추가하여도 투두가 추가되는 문제
Editor.jsx

 const onSubmit = () => {
    if (content === "") {
      return;
    }
    onCreate(content);
  };

입력폼이 비워지지 않아서 사용자가 문자열이 추가되었는지 모를 수도 있다.
Editor.jsx

const onSubmit = () => {
    if (content === "") {
        contentRef.current.focus();
      return;
    }
    onCreate(content);
    setContent(""); //입력후 입력란 초기화
  };

Enter만 눌러도 항목이 추가될 수 있도록 해줄 수 있다.
onKeyDown={onKeydown}를 이용하여 설정하면 된다.

최종 코드:

Editor.css

.Editor {
  display: flex;
  gap: 10px;
}

.Editor input {
  flex: 1;
  padding: 15px;
  border: 1px solid rgb(220, 220, 220);
  border-radius: 5px;
}
.Editor button {
  cursor: pointer;
  width: 80px;
  border: none;
  background-color: rgb(37, 147, 255);
  color: white;
  border-radius: 5px;
}

Editor.jsx

import "./Editor.css";
import { useState, useRef } from "react";

const Editor = ({ onCreate }) => {
  const [content, setContent] = useState("");
  const contentRef = useRef();
  const onChangeContent = (e) => {
    setContent(e.target.value);
  };
  const onKeydown = (e) => {
    if (e.keyCode === 13) {
      onSubmit();
    }
  };
  const onSubmit = () => {
    if (content === "") {
      contentRef.current.focus();
      return;
    }
    onCreate(content);
    setContent(""); //입력후 입력란 초기화
  };

  return (
    <div className="Editor">
      <input
        ref={contentRef}
        value={content}
        onKeyDown={onKeydown}
        onChange={onChangeContent}
        placeholder="새로운 Todo..."
      />
      <button onClick={onSubmit}>추가</button>
    </div>
  );
};

export default Editor;

Header.css

.Header > h1 {
  color: rgb(37, 147, 255);
}

Header.jsx

import "./Header.css";

const Header = () => {
  return (
    <div className="Header">
      <h3>오늘은 📆 </h3>
      <h1>{new Date().toDateString()}</h1>
    </div>
  );
};

export default Header; //window + . 로 이모지 추각 가능하다.

List.css

.List {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.List > input {
  width: 100%;
  border: one;
  border-bottom: 1px solid rgb(220, 220, 220);
  padding: 15px 0px;
}

.List > input:focus {
  outline: none;
  border-bottom: 1px solid rgb(37, 147, 255);
}
.List .todos_wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

List.jsx

import "./List.css";
import TodoItem from "./TodoItem";
import { useState } from "react";

const List = ({ todos }) => {
  const [search, setSearch] = useState("");

  const onChangeSearch = (e) => {
    setSearch(e.target.value);
  };

  const getFilteredData = () => {
    if (search === "") {
      return todos;
    }
    return todos.filter((todo) =>
      todo.content.toLowerCase().includes(search.toLowerCase())
    );
  };

  const filteredTodos = getFilteredData();

  return (
    <div className="List">
      <h4>Todo List 🌱</h4>
      <input
        value={search}
        onChange={onChangeSearch}
        placeholder="검색어를 입력하세요"
      />
      <div className="todos_wrapper">
        {filteredTodos.map((todo) => (
          <TodoItem key={todo.id} {...todo} />
        ))}
      </div>
    </div>
  );
};

export default List;

TodoItem.css

.TodoItem {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgb(240, 240, 240);
}

.TodoItem input {
  width: 20px;
}

.TodoItem .content {
  flex: 1;
}

.TodoItem .date {
  font-size: 14px;
  color: gray;
}

.TodoItem button {
  cursor: pointer;
  color: gray;
  font-size: 14px;
  border: none;
  border-radius: 5px;
  padding: 5px;
}

TodoItem.jsx

import "./TodoItem.css";

const TodoItem = ({ id, isDone, content, date }) => {
  return (
    <div className="TodoItem">
      <input readOnly checked={isDone} type="checkbox" />
      <div className="content">{content}</div>
      <div className="date">{new Date(date).toLocaleDateString()}</div>
      <button> 삭제</button>
    </div>
  );
};

export default TodoItem;

App.css

.App {
  width: 500px;
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  gap: 10px;
}

App.jsx

import "./App.css";
import { useState, useRef } from "react";
import Header from "./components/Header";
import Editor from "./components/Editor";
import List from "./components/List";

const mockData = [
  {
    id: 0,
    isDone: false,
    content: "React 공부하기",
    date: new Date().getTime(),
  },
  {
    id: 1,
    isDone: false,
    content: "코어타임 갖기",
    date: new Date().getTime(),
  },
  {
    id: 2,
    isDone: false,
    content: "일찍 일어나기",
    date: new Date().getTime(),
  },
];
function App() {
  const [todos, setTodos] = useState(mockData);
  const idRef = useRef(3);

  const onCreate = (content) => {
    const newTodo = {
      id: idRef.current++,
      isDone: false,
      content: content,
      date: new Date().getTime(),
    };

    setTodos([newTodo, ...todos]);
  };

  return (
    <div className="App">
      <Header />
      <Editor onCreate={onCreate} />
      <List todos={todos} />
    </div>
  );
}

export default App;

main.jsx

import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App.jsx";

createRoot(document.getElementById("root")).render(<App />);

최종 구현 화면: