4. Todo List 컴포넌트 기능 구현(3)

할 일 리스트 렌더링 TodoList

 

[ TodoList(  )의 파라미터 ]

const TodoList = ({ todo, onUpdate, onDelete }) => { (...) }

props를 구조분해 할당한다.

 

[TodoList(  )에서 return 된 HTML ]

return <div className="TodoList">             <h4>Todo List</h4>             <input                   value={search}                   onChange={onChangeSearch}                   className="searchbar"                   placeholder="검색어를 입력하세요"              />             <div className="list_wrapper">                 {getSearchReuslt().map((work) => {                     <TodoItem                                 key={work.id}                                 {...work}                                 onUpdate={onUpdate}                                 onDelete={onDelete}                      />                 })}             </div>         </div>

input의 value 값으로 {search}props를 할당한다. input 입력시마다 onChangeSearch 함수가 실행된다. 검색결과를 배열로 받는 getSearchReuslt()를 새로운 아이템으로 재배열 한다. todo의 모든 요소를 순차적으로 순회하며 HTML로 변환. work의 모든 프로퍼티를 스프레드 연산자를 이용해 props로 전달한다.

* onUpdate()전달 : App->TodoList->TodoItem

* 리액트 컴포넌트는 바로 한 단계 아래의 자식 컴포넌트에만 데이터 전달이 가능해 한 단계 이상으로 데이터를 전달하려면 전달을 반복해야한다.비효율적(=props Drilling)

* 특정컴포넌트를 수정, 추가, 삭제하는 경우 key로 어떤 컴포넌트를 업데이트할지 결정한다.
* Ref 객체로 고유 id를 만들었기 때문에 id를 key로 전달하면 문제를 해결할 수 있다.
* map을 이용해 컴포넌트를 리스트 형태로 반복적으로 렌더링하려면 반드시 리스트 내의 고유한 key를 Props로 전달해야한다.

[ TodoList(  ) 내에 선언된 것들]

const [ search, setSearch ] = useState("");     const onChangeSearch = (e) => {         setSearch(e.target.value);     }	검색창을 초기화한다. 검색어의 값이 바뀔때마다 setSearch에 검색어 값을 업데이트한다.
const getSearchReuslt = () => {         return search === ""                  ? todo                 : todo.filter((work) => {                         work.content.toLowerCase().includes(search.toLowerCase())})     }	입력한 검색어인 search가 빈문자열이면 todo를 그대로 반환, 아니면 필터링(소문자로 바꾼 컨텐트에 소문자로 바꾼 검색어 글자가 포함되어있는 것들을 필터링한다.)

 

TodoList.js

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

const TodoList = ({ todo, onUpdate, onDelete }) => { //props를 구조분해 할당한다.
    const [ search, setSearch ] = useState("");
    const onChangeSearch = (e) => {
        setSearch(e.target.value);
    }
    const getSearchReuslt = () => {
        return search === "" ? todo : todo.filter((work) => {work.content.toLowerCase().includes(search.toLowerCase())})
    }
    
    return(
		<div className="TodoList">
            <h4>Todo List</h4>
            <input value={search} onChange={onChangeSearch} className="searchbar" placeholder="검색어를 입력하세요" />
            <div className="list_wrapper">
                {getSearchReuslt().map((work) => {
                    <TodoItem key={work.id} {...work} onUpdate={onUpdate} onDelete={onDelete} />
                })}
            </div>
        </div>
	)
}

export default TodoList;