초보자에게 친숙한 ReactJS 식료품 목록 앱

최근에 ReactJS를 배우기 시작했다면 개념을 연습하기 위해 간단하고 초보자용 앱을 구축하고 있을 것입니다. 할 일 목록 앱이 가장 먼저 떠오를 것입니다. 그러니 하나 만들어 보겠습니다. 공식 React Docs를 참조할 수 있습니다. 기본 개념은 https://reactjs.org/에서, 다른 React 튜토리얼은 이전 블로그에서 참조하세요.

VS Code 또는 사용 중인 코드를 엽니다.
반응 앱을 생성하려면 터미널에 아래 명령을 입력하십시오.

npx create-react-app grocerylist

그런 다음 디렉토리를 변경하려면 다음을 수행하십시오.

cd grocerylist 

그런 다음 서버를 시작합니다.

npm start 

아래 창이 http://localhost:3000/에서 브라우저에서 열립니다.



먼저 구축하려는 것을 계획한 다음 단계별로 실행해 보겠습니다.
1. 먼저 항목을 입력할 입력 유형을 만듭니다.
2. 항목을 제출하는 버튼.
3. 삭제 및 완료 표시 기능과 함께 항목을 표시하는 목록입니다.

React Hooks의 개념, React, Arrays, Object, Arrow functions, spread operator, props에서 기본 폼을 만드는 방법을 살펴보세요.

이제 App.js 파일의 코드를 편집하겠습니다. 여기서는 상태를 정의하기 위해 useState()를 사용하는 기능적 구성 요소를 사용할 것입니다.

아래 양식을 작성하십시오.

 <form onSubmit={handleSubmit}>
        <input type="text" value={item} onChange={handleChange} />
        <button type="submit">ADD</button>
      </form>

양식을 만든 후의 전체 코드는 다음과 같습니다.

import React, { useState } from "react";
import "./App.css"
import { v4 as uuidv4 } from "uuid";

function App() {
  const [item, setItem] = useState("");
  const [list, setList] = useState([]);

  const handleSubmit = (e) => {
    const newItem = {
      id: uuidv4(),
      item: item,
      complete: false,
    };
    e.preventDefault();
    if (item) {
      setList([...list, newItem]);
      setItem("");
    }
  };

  const handleChange = (e) => {
    setItem(e.target.value);
  };

  return (
    <div className="App">
      <h1>Grocery List</h1>
      <form onSubmit={handleSubmit}>
        <input type="text" value={item} onChange={handleChange} />
        <button type="submit">ADD</button>
      </form>
    </div>
  );
}

export default App;

위 코드에 대한 설명:
사용자가 입력한 항목의 값을 저장하는 상태 "항목"을 만듭니다. 배열에 항목 모음을 저장하는 또 다른 상태 "목록"을 만듭니다.

사용자가 입력 양식에 새 값을 입력할 때마다 상태 "항목"을 처리하는 화살표 함수 "handleChange"를 만듭니다. setItem을 사용하여 상태를 변경하고 대상 값에 할당합니다.
사용자가 새 항목을 입력할 때마다 항목으로 배열 목록을 업데이트하는 또 다른 함수 "handleSubmit"을 만듭니다. 여기에서 모든 항목에는 uuid(링크https://www.npmjs.com/package/uuid),item 참조 및 부울인 "complete"참조)를 사용하여 생성된 고유 ID가 포함됩니다. state를 사용하고 여기에서 항목을 "true"또는 "false"로 만들어 항목을 완전하거나 불완전하게 표시하는 데 사용합니다.

이제 새 구성 요소 Item.js를 만들어 보겠습니다. 아래 코드는 다음과 같습니다.

import React from "react";
import "./Item.css";

const Item = ({ id, items, list, setList, complete }) => {
  const remove = (id) => {
    setList(list.filter((el) => el.id !== id));
  };

  const handleComplete = (id) => {
    setList(
      list.map((item) => {
        if (item.id === id) {
          return {
            ...item,
            complete: !item.complete,
          };
        }
        return item;
      })
    );
  };

  return (
    <div className="item">
      <p className={complete ? "complete" : ""}>{items}</p>
      <img
        onClick={() => handleComplete(id)}
        src="https://img.icons8.com/offices/40/000000/checked-2--v2.png"
        alt="complete task"
      />
      <img
        onClick={() => remove(id)}
        src="https://img.icons8.com/color/48/000000/trash.png"
        alt="Delete"
      />
    </div>
  );
};
export default Item;

여기에서 항목을 삭제하기 위해 제거하려는 항목을 필터링하고 나머지 항목을 표시합니다. 필터링하려면 항목의 ID를 비교합니다.
이제 항목을 완료로 표시하기 위해 목록 배열을 반복하고 ID를 비교하여 해당 항목의 "완료"상태를 변경합니다.
디자인은 선택 사항이므로 원하는 디자인을 선택할 수 있습니다. 원하는 경우 React에 스타일이 지정된 구성 요소를 사용하십시오. 이 링크https://styled-components.com/docs/basics를 참조하십시오.

최종 앱은 다음과 같습니다.


최종 프로젝트 데모 링크-https://tender-lovelace-00a0b9.netlify.app/
Github 리포지토리 링크- https://github.com/kritika27/grocery-list-reactjs

개량:
1. 로컬 저장소를 추가할 수 있습니다.
2. Firebase를 통해 백엔드를 추가할 수 있습니다.
3. 로그인 및 회원가입 기능을 추가할 수 있습니다.

제안은 언제나 환영합니다 :)