SearchItem
const SearchItem = ({ search, setSearch }) => {
return (
<form className="searchForm" onSubmit={(e) => e.preventDefault()}>
<label htmlFor="search">Search</label>
<input
id="search"
type="text"
role="searchbox"
placeholder="검색하기"
value={search}
onChange={(e) => setSearch(e.target.value)}
/>
</form>
)
}
export default SearchItem
1. SearchItem 컴포넌트는 검색을 위한 입력 폼을 렌더링하는 역할. search와 setSearch 함수가 props로 전달.
2. <form> 요소. onSubmit 핸들러에서 e.preventDefault()를 호출해 폼 제출 시 페이지가 리로드되지 않도록 한다.
3. <label> 요소. 폼의 목적을 설명하는 레이블을 제공. htmlFor 속성을 사용하여 해당 <input> 요소와 연결.
4. <input> 요소를 만든다.
- 검색어를 입력할 수 있는 입력 필드를 제공.
- id 속성은 레이블과 연결하기 위해 사용.
- type 속성은 "text"로 설정하여 텍스트 입력을 받음.
- role 속성을 사용하여 스크린 리더에게 이 입력 필드가 검색어 입력을 받는 역할을 한다는 것을 알림.
- placeholder 속성은 입력 필드에 표시되는 안내 텍스트를 제공.
- value 속성은 search 상태 변수의 값을 표시.
- onChange 핸들러는 입력 필드 값이 변경될 때마다 setSearch 함수를 호출하여 검색어를 업데이트.
App.js
import Header from "./Header";
import SearchItem from "./SearchItem";
import AddItem from "./AddItem";
import Content from "./Content";
import Footer from "./Footer";
import { useState } from "react";
function App() {
const [items, setItems] = useState(JSON.parse(localStorage.getItem('shoppinglist')));
const [newItem, setNewItem] = useState('')
const [search, setSearch] = useState('')
const setAndSaveItems = (newItems) => {
setItems(newItems)
localStorage.setItem("shoppinglist", JSON.stringify(newItems));
}
const addItem = (item) => {
const id = items.length ? items[items.length - 1].id + 1 : 1
const myNewItem = { id, checked: false, item }
const listItems = [...items, myNewItem]
setAndSaveItems(listItems)
}
1. 필요한 컴포넌트와 리액트의 useState 훅을 불러온다.
2. App 컴포넌트는 전체 애플리케이션을 구성하며, Todo 리스트의 핵심 기능들을 구현한다.
3. useState를 사용하여 상태 변수들을 초기화한다.
- items는 로컬 스토리지에서 가져온 항목들을 담는 배열
- newItem은 새로운 아이템을 추가하는 데 사용되는 상태
- search는 검색어를 담는 상태
4. setAndSaveItems 함수는 새로운 아이템 목록을 받아 setItems로 상태를 업데이트하고, 로컬 스토리지에도 업데이트 내용을 저장한다.
5. addItem 함수는 새로운 아이템을 추가하는 역할을 한다. 기존 아이템 배열에 새로운 아이템을 추가하고, setAndSaveItems를 호출하여 상태를 업데이트한다.
const handleCheck = (id) => {
const listItems = items.map((item) =>
item.id === id ? { ...item, checked: !item.checked } : item
);
setAndSaveItems(listItems)
};
const handleDelete = (id) => {
const listItems = items.filter((item) => item.id !== id);
setAndSaveItems(listItems)
};
const handleSubmit = (e) => {
e.preventDefault();
if (!newItem) return;
addItem(newItem);
setNewItem('');
}
6. handleCheck 함수는 아이템 체크 상태를 변경하는 역할을 한다. 해당 아이템의 체크 상태를 반전시켜서 업데이트하고, setAndSaveItems를 호출하여 상태를 업데이트한다.
7. handleDelete 함수는 아이템을 삭제하는 역할을 한다. 해당 아이템을 배열에서 제거한 후, setAndSaveItems를 호출하여 상태를 업데이트한다.
8. handleSubmit 함수는 새로운 아이템을 추가하는 폼의 제출을 처리한다. 새로운 아이템을 addItem를 통해 추가하고, setNewItem으로 입력 필드를 초기화한다.
return (
<div className="App">
<Header title="Todo List _𝕤𝕖𝕒𝕣𝕔𝕙" />
<AddItem
newItem={newItem}
setNewItem={setNewItem}
handleSubmit={handleSubmit} />
<SearchItem
search={search}
setSearch={setSearch} />
<Content
items={items.filter(item => ((item.item).toLowerCase()).includes(search.toLowerCase()))}
handleCheck={handleCheck}
handleDelete={handleDelete} />
<Footer length={items.length} />
</div>
);
}
export default App;
9. 컴포넌트 반환 부분에서, Header, AddItem, SearchItem, Content, Footer 컴포넌트들을 사용하여 애플리케이션을 구성한다.
'React' 카테고리의 다른 글
[React/리액트] useEffect | 리액트 훅(Hook) 사용 방법 (0) | 2023.08.22 |
---|---|
[React/리액트] 색상 팔레트 프로그램 만들기 | CSS Color Names, Hex code (0) | 2023.08.21 |
[React/리액트] 검색기능을 추가한 Todo List 만들기 - 컴포넌트 모음 | ItemList, AddItem, LineItem (0) | 2023.08.21 |
[React/리액트] JSX(JavaScript XML) | CSS 부트스트랩 적용(className), 삼항 연산자(list.map()) (0) | 2023.08.17 |
[React/리액트] JSX(JavaScript XML) | 변수값 출력 (0) | 2023.08.15 |