[React/리액트] 검색기능을 추가한 Todo List 만들기 - 컴포넌트 모음 | ItemList, AddItem, LineItem

 

 

 

 

ItemList

import LineItem from "./LineItem";

const ItemList = ({ items, handleCheck, handleDelete }) => {
    return (
        <ul>
            {items.map((item) => (
                <LineItem
                    key={item.id}
                    item={item}
                    handleCheck={handleCheck}
                    handleDelete={handleDelete} />
            ))}
        </ul>
    )
}

export default ItemList

 

1. items 배열을 .map() 메서드를 사용하여 반복하면서 각 항목에 대해 LineItem 컴포넌트를 렌더링한다.
2. 각 LineItem 컴포넌트에는 key, item, handleCheck, 그리고 handleDelete 함수가 props로 전달된다.
3. key는 React에서 컴포넌트를 업데이트하고 재사용하기 위해 필요한 유일한 식별자.
4. item은 items 배열의 각 항목을 나타낸다.
5. handleCheck와 handleDelete 함수는 각각 체크 및 삭제 동작을 수행할 때 호출되어야 하는 함수.

 

 

 

 

---

AddItem

import { FaPlus } from 'react-icons/fa'
import { useRef } from 'react'

function AddItem({ newItem, setNewItem, handleSubmit }) {
    const inputRef = useRef();

    return (
        <form className="addForm" onSubmit={handleSubmit}>
            <label htmlFor="addItem">Add Item</label>
            <input
                autoFocus
                ref={inputRef}
                id="addItem"
                type="text"
                placeholder="아이템 추가하기"
                required
                value={newItem}
                onChange={(e) => setNewItem(e.target.value)}
            />
            <button
                type="submit"
                aria-label="Add Item"
                onClick={() => inputRef.current.focus()}>
                <FaPlus />
            </button>
        </form>
    )
}

export default AddItem;

반응형

1. AddItem 컴포넌트는 새로운 아이템을 추가하기 위한 입력 폼과 버튼을 렌더링한다.
2. useRef()를 사용하여 inputRef라는 참조(reference)를 생성한다. 나중에 <input> 요소를 참조할 때 사용된다.
3. 컴포넌트의 반환 부분에서, <form> 요소를 만든다. onSubmit 속성에는 handleSubmit 함수를 전달하여 폼이 제출되었을 때의 동작을 설정한다.
4. <label> 요소는 폼의 목적을 설명하기 위한 텍스트를 제공한다. htmlFor 속성을 사용해 해당 <input> 요소와 연결된다.
5. <input> 요소를 만든다.

• autoFocus 속성을 통해 페이지가 로드될 때 자동으로 입력 필드에 포커스가 이동.
• ref={inputRef}를 통해 inputRef가 이 <input> 요소를 참조하도록 설정.
• id 속성과 htmlFor 속성을 매칭시키기 위해 동일한 값을 사용.
• placeholder 속성은 입력 필드에 표시되는 안내 텍스트를 제공.
• required 속성은 필수 입력 필드임을 나타냄.
• value 속성은 newItem 상태 변수의 값을 표시.
• onChange 핸들러는 입력 필드 값이 변경될 때마다 setNewItem 함수를 호출하여 상태를 업데이트.

6. <button> 요소를 만든다.

• type="submit" 속성을 통해 버튼이 폼 제출 동작을 수행함을 나타냄.
• aria-label 속성을 사용하여 스크린 리더와 같은 보조 기술을 위한 설명을 제공.
• onClick 핸들러를 통해 버튼 클릭 시 inputRef.current.focus()를 호출하여 입력 필드에 포커스가 이동.

 

 

 

---

LineItem

import { FaTrashAlt } from "react-icons/fa";

const LineItem = ({ item, handleCheck, handleDelete }) => {
    return (
        <li className="item">
            <input
                type="checkbox"
                onChange={() => handleCheck(item.id)}
                checked={item.checked}
            />
            <label
                style={item.checked ? { textDecoration: "line-through" } : null}
                onDoubleClick={() => handleCheck(item.id)}
            >
                {item.item}
            </label>
            <FaTrashAlt
                onClick={() => handleDelete(item.id)}
                role="button"
                tabIndex="0"
                aria-label={`Delete ${item.item}`}
            />
        </li>
    )
}

export default LineItem

 

1. LineItem 컴포넌트는 각 항목의 리스트 아이템을 렌더링하는 역할을 한다.

   (item, handleCheck, handleDelete 함수가 props로 전달)
2. <li> 요소를 만든다. 각 아이템은 리스트 항목으로 랜더링되며, className 속성을 사용하여 스타일을 적용한다.
3. <input> 요소를 만든다.

• 이 체크박스는 아이템을 체크/언체크 동작을 한다 .
• onChange 핸들러를 통해 체크박스 상태 변경 시 handleCheck 함수를 호출.
• checked 속성을 통해 item.checked 상태에 따라 체크박스의 체크 여부를 결정.

4. <label> 요소를 만든다.

• 아이템의 텍스트를 나타내며, 체크된 경우에는 취소선 스타일을 적용.
• style 속성을 사용하여 스타일을 동적으로 변경.
• 더블 클릭 시 handleCheck 함수를 호출하여 아이템을 체크/언체크할 수 있도록 함.

5. FaTrashAlt 아이콘을 만든다.

• 이 아이콘은 아이템을 삭제하는 역할.
• onClick 핸들러를 통해 아이템 삭제 시 handleDelete 함수를 호출.
• role, tabIndex, aria-label 속성을 사용하여 스크린 리더 및 접근성을 위한 설정을 제공.