[React #28] ToDo List

📌리스트 읽어오기

App.jsx에서 List 컴포넌트에 props로 todos 리스트를 전달하고,

List.jsx → TodoItem.jsx에서 받기

List.jsx

import TodoItem from './TodoItem';

function List({ todos }) {
  return (
    <div className='List'>
      <h4>ToDo List ☘️</h4>
      <input placeholder='검색어를 입력해 주세요.' />
      <div className='todos_warpper'>
        {todos.map((todo) => {
          return <TodoItem {...todo} key={todo.id} />;
        })}
      </div>
    </div>
  );
}

export default List;

map() 이용해서 배열에 담긴 값을 리스트 형태로 반복적으로 렌더링 해줌
map은 배열의 모든 요소에 대해서 콜백 함수를 실행한 뒤 리턴한 반환 값들을 새로운 배열로 반환함
todo에 담긴 모든 값을 props로 전달하기 위해 스프레드 연산자로 모든 데이터를 전달해줌
리스트 형태로 렌더링된 컴포넌트들은 서로를 구분하기 위해서 각각의 key라는 고유한 값이 있어야 함

TodoItem.jsx

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

export default TodoItem;

List.jsx로부터 전달받은 props를 기반으로 서로 다른 UI를 렌더링할 수 있음
날짜는 새로운 객체로 생성하고, toLocaleDateString() 이용해서 날짜 포맷을 변경함

📌리스트 검색하기

List.jsx에서 입력한 값과 동일한 리스트만 보여주기

List.jsx

import { useState } from 'react';
import TodoItem from './TodoItem';

function List({ todos }) {
  const [search, setSearch] = useState('');
  const onSearch = (e) => {
    setSearch(e.target.value);
  };
  const getFilteredData = () => {
    if (search === '') {
      return todos;
    }
    return todos.filter((todo) =>
      todo.content.toLocaleLowerCase().includes(search.toLocaleLowerCase())
    );
  };
  const filteredData = getFilteredData();
  return (
    <div className='List'>
      <h4>ToDo List ☘️</h4>
      <input
        onChange={onSearch}
        value={search}
        placeholder='검색어를 입력해 주세요.'
      />
      <div className='todos_warpper'>
        {filteredData.map((todo) => {
          return <TodoItem {...todo} key={todo.id} />;
        })}
      </div>
    </div>
  );
}

export default List;

search를 state로 생성하여, input 값이 변경될 때마다 search의 값을 저장함
getFilterData를 생성하여, search의 값이 없다면 그대로 배열을 반환함
그게 아니라면 filter() 이용해서 배열의 모든 아이템을 순회해 연산의 값이 참인 배열을 필터링하는데,
filter() 의 기준은 includes() 이용해 search의 값을 포함하고 있다면 true, 없다면 false를 반환함
생성한 getFilterData 함수를 호출하고 'filterData' 변수에 담아준 뒤 이 배열을 리스트로 반환함
대·소문자 구분없이 하기 위해서 toLocaleLowerCase() 이용해서 검색어와 todo의 content를 모두 소문자로 변환함