7주 - Todo-앱 추가

React Curve 7주차에 오신 것을 환영합니다

개발자님 안녕하세요! 다시 만나 반갑습니다.

대규모 프로젝트를 구축하기 위한 개념을 이해한 방식으로 작은 UI 구성 요소를 공유하고 생성할 수 있는 반응 곡선 오픈 소스 프로젝트입니다.

Todo-추가 앱

이번 주에 우리는 todo-add 앱을 만들었습니다. 사용자가 반응형 양식에 작업을 추가할 수 있는 앱입니다.

Todo-Add 컴포넌트를 생성하려면 우리는 다음을 수행해야 합니다.

부모 TodoAddV1, ItemForm 및 PrintItems 자식 구성 요소의 세 가지 구성 요소를 만듭니다.

부모 TodoAddV1 구성 요소에서 목록을 저장하는 상태를 만들고 제출 버튼에 대한 응답으로 화면에 표시되는 내용을 업데이트합니다.

handleAddItem 메서드에서 상태에 저장된 배열을 업데이트하려면 기존 배열의 복사본을 만든 다음 새 배열을 사용하도록 상태를 설정해야 합니다.

itemForm 구성 요소에 handleAddItem 메서드를 보내고 목록을 PrintItems 구성 요소에 소품으로 보냅니다.

자식 ItemForm 구성 요소에서 변경 입력 및 제출 버튼에 대한 응답으로 업데이트를 처리하는 항목 및 함수를 저장하는 상태를 만듭니다.

사용자가 양식과 상호 작용할 때 InputChange를 처리하고 제출합니다.

마지막으로 자식 PrintItems 구성 요소에서 목록 항목을 렌더링하고 항목 이름을 인쇄하도록 매핑합니다.

암호

TodoAddV1 구성 요소

import React, {useState} from 'react';

import ItemForm from './ItemForm';
import PrintItems from './PrintItems';

const TodoAddV1 = () => {
    const [lists, setLists] = useState([])

    const handleAddItem = (item) => {
      item.id = lists.length + 1
      setLists([...lists, item])
    }

    return (
         <div>
           <h2>Add to Todo</h2>

           <ItemForm addItem={handleAddItem} />
           <PrintItems lists={lists} />
         </div>
    );
}

export default TodoAddV1;

아이템폼 컴포넌트

import React, {useState} from 'react'; 

const ItemForm = (props) => {
  const initialFormState = { id: null, name: '' }
  const [item, setItem] = useState(initialFormState)

  const handleInputChange = (ev) => {
    const { name, value } = ev.target

    setItem({ ...item, [name]: value })
  }

  const handleSubmit = (ev) => {
    ev.preventDefault()
    if (!item.name) return
    props.addItem(item)
    setItem(initialFormState)
  }

  return (
    <>
      <form onSubmit={handleSubmit}>
        <label>Enter Item</label> <br />
        <input
          type="text"
          name="name"
          value={item.name}
          onChange={handleInputChange}
        />
        <br />
        <button>Add new item</button>
      </form>
    </>
  );
}

export default ItemForm;

PrintItems 구성 요소

import React from 'react';

const PrintItems = (props) => {
  return (
    <div>
      {props.lists.length > 0 ? (
        props.lists.map((item) => (
          <ul key={item.id}>
            <li>{item.name}</li>
          </ul>
        ))
      ) : (
        <div>
          No items
        </div>
      )}
    </div>
  );
}

export default PrintItems;

결론

읽어 주셔서 감사합니다. 아래 스레드에서 어떤 기여도 환영합니다!

Live Preview