5 /28 TIL

목표

pocketItem이 PocketStatus에 저장 버튼을 누르면 즉시 반영되도록 구현하기.

과정

1. 상태 관리 설정하기:

   • App.js 컴포넌트에서 지출 항목 목록을 관리하는 상태를 생성.
   • 이 목록은 NewItemForm에서 항목이 추가될 때마다 업데이트됩니다.

2. 항목 추가 기능 구현:

   • NewItemForm에서 항목을 추가할 때 App.js의 상태를 업데이트하도록 콜백 함수 전달.
   • App.js의 상태를 업데이트하면 PocketItems 컴포넌트에 즉시 반영됩니다.

3. 항목 목록 전달:

   • 업데이트된 지출 항목 목록을 PocketItems 컴포넌트로 전달하여 화면에 표시.

코드 구현

App.js

import React, { useState } from 'react';
import NewItemForm from './NewItemForm';
import PocketItems from './PocketItems';

function App() {
  // 지출 항목 목록을 관리하는 상태
  const [items, setItems] = useState([]);

  // 새 지출 항목을 추가하는 함수
  const addNewItem = (newItem) => {
    setItems(prevItems => [...prevItems, newItem]);
  };

  return (
    <div className="App">
      <h1>Expense Management App</h1>
      <NewItemForm onAddItem={addNewItem} /> {/* 항목 추가 콜백 함수를 NewItemForm에 전달 */}
      <PocketItems items={items} /> {/* 업데이트된 지출 항목 목록을 PocketItems에 전달 */}
    </div>
  );
}

export default App;

NewItemForm.js

import React, { useState } from 'react';

function NewItemForm({ onAddItem }) {
  const [inputValue, setInputValue] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    const newItem = { text: inputValue }; // 새 항목 객체 생성
    onAddItem(newItem);
    setInputValue(''); // 폼 초기화
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="text" 
        value={inputValue} 
        onChange={(e) => setInputValue(e.target.value)} 
        placeholder="Enter a new item" 
      />
      <button type="submit">Add Item</button>
    </form>
  );
}

export default NewItemForm;

PocketItems.js

import React from 'react';

function PocketItems({ items }) {
  return (
    <div>
      {items.map((item, index) => (
        <div key={index}>{item.text}</div>
      ))}
    </div>
  );
}

export default PocketItems;

결과

• NewItemForm에서 항목을 추가할 때마다 App.js의 상태가 업데이트되고, 이 상태는 PocketItems 컴포넌트에 전달되어 즉시 화면에 반영됩니다.
• 이를 통해 사용자가 입력한 항목이 저장 버튼을 누르면 바로 PocketItems에 표시됩니다.

느낀 점

• React의 상태 관리와 상태 끌어올리기(lifting state up) 개념을 적용하여 컴포넌트 간 데이터 흐름을 관리하는 방법을 익힐 수 있었습니다.
• 실시간으로 UI가 업데이트되는 경험을 통해 사용자 경험을 향상시킬 수 있는 방법을 배웠습니다.