TodoList_복습1

● List.js : 검색창에 입력값에 따라 바로 렌더링

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

function List({ items, onUpdateItem, onDeleteItem }) {
  const [search, setSearch] = useState("");

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

  const onKeyDownSearch = (event) => {
    if (event.keyCode === 13) {
      // 검색어가 없으면 필터링하지 않고 반환
      if (search === "") {
        return;
      }
    }
  };

  const getFilterItems = () => {
    // 검색어가 비어 있으면 전체 항목 반환
    if (search === "") {
      return items;
    }
    // 검색어가 있으면 필터링된 항목 반환
    return items.filter((item) =>
      item.content.toLowerCase().includes(search.toLowerCase())
    );
  };

  // getFilterItems()를 호출해 필요한 항목을 렌더링
  const filteredItems = getFilterItems();

  return (
    <div className="List">
      <p>Todo List🌱</p>
      <input
        onKeyDown={onKeyDownSearch}
        onChange={onChangeSearch}
        value={search}
        placeholder="검색어를 입력하세요."
      />
      <div className="Lists">
        {filteredItems.map((item) => (
          <TodoItem
            key={item.id}
            item={item}
            onDeleteItem={onDeleteItem}
            onUpdateItem={onUpdateItem}
          />
        ))}
      </div>
    </div>
  );
}

export default List;

● List.js : 엔터심에만 검색 가동 , 렌더링 코드 :

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

function List({ items, onUpdateItem, onDeleteItem }) {
  const [search, setSearch] = useState("");

    //onChange에 대한 핸들러 제거,
    //onkeyDown에만 핸들러 적용 + 그때만 search 업데이트 

  const onKeyDownSearch = (event) => {
    if (event.keyCode === 13) {
      setSearch(event.target.value);

      // 검색어가 없으면 필터링하지 않고 반환
      if (search === "") {
        return;
      }
    }
  };
//search가 끝날때만 , items 업데이트
  const getFilterItems = () => {
    // 검색어가 비어 있으면 전체 항목 반환
    if (search === "") {
      return items;
    }
    // 검색어가 있으면 필터링된 항목 반환
    return items.filter((item) =>
      item.content.toLowerCase().includes(search.toLowerCase())
    );
  };

  // getFilterItems()를 호출해 필요한 항목을 렌더링
  const filteredItems = getFilterItems();

  return (
    <div className="List">
      <p>Todo List🌱</p>
      <input onKeyDown={onKeyDownSearch} placeholder="검색어를 입력하세요." />
      <div className="Lists">
        {filteredItems.map((item) => (
          <TodoItem
            key={item.id}
            item={item}
            onDeleteItem={onDeleteItem}
            onUpdateItem={onUpdateItem}
          />
        ))}
      </div>
    </div>
  );
}

export default List;

● List.js : 검색 , 삭제 , 추가 , 수정 기능 외에는 재랜더링 되지 않도록, useMemo 적용 + 집계도 출력하기

즉, 검색, 추가 입력창에 타이핑 되는 동안에는 검색, 집계가 작동되지 않도록 최적화

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

function List({ items, onUpdateItem, onDeleteItem }) {
  const [search, setSearch] = useState("");

  const onKeyDownSearch = (event) => {
    if (event.keyCode === 13) {
      setSearch(event.target.value);

      // 검색어가 없으면 필터링하지 않고 반환
      if (search === "") {
        return;
      }
    }
  };
  // getFilterItems()를 호출해 필요한 항목을 렌더링
  const filteredItems = useMemo(() => {
    console.log("검색기능!!");

    if (search === "") {
      return items;
    }
    // 검색어가 있으면 필터링된 항목 반환
    return items.filter((item) =>
      item.content.toLowerCase().includes(search.toLowerCase())
    );
  }, [items, search]);

  //개수 출력
  const { totalCount, isDoneCount, isNotDoneCount } = useMemo(() => {
    console.log("집계과정");

    const totalCount = items.length;
    const isDoneCount = items.filter((item) => item.isDone).length;
    const isNotDoneCount = totalCount - isDoneCount;

    return { totalCount, isDoneCount, isNotDoneCount };
  }, [items]);

  return (
    <div className="List">
      <p>Todo List🌱</p>
      <div className="PrintCount">
        <p>총 항목 개수 : {totalCount}</p>
        <p>완료 항목 개수 : {isDoneCount}</p>
        <p>미완료료 항목 개수 : {isNotDoneCount}</p>
      </div>
      <input onKeyDown={onKeyDownSearch} placeholder="검색어를 입력하세요." />
      <div className="Lists">
        {filteredItems.map((item) => (
          <TodoItem
            key={item.id}
            item={item}
            onDeleteItem={onDeleteItem}
            onUpdateItem={onUpdateItem}
          />
        ))}
      </div>
    </div>
  );
}

export default List;