[React #28] ToDo List - Read

📌리스트 읽어오기

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를 모두 소문자로 변환함

---

📌실행화면