지출 관리 앱에서 이벤트 소개
안녕하세요, 미래의 React 개발자 여러분! 오늘 우리는 지출 관리 앱에서 이벤트의 흥미로운 세상으로 뛰어들어 보겠습니다. 프로그래밍에 새로운 사람이라고 걱정하지 마세요 - 저는 어린이집 교사가 하늘이 파란색인 이유를 설명하는 것처럼 인내심을 가지고 단계별로 안내해 드리겠습니다. 좋아하는 음료를 손에 들고, 편안하게 앉아 이 코딩 모험을 함께 시작해 보세요!
React에서 이벤트는 무엇인가요?
코드에 뛰어들기 전에 이벤트가 무엇인지 이해해 보겠습니다. 당신이 파티(React 파티겠죠)에 있고, 누군가의 어깨를 툭 때마다 그들이 반응하는 상상해 보세요. React에서 이벤트는 바로 그것입니다 - 애플리케이션에서 반응을 촉발하는 행동입니다.
우리의 지출 관리 앱에서는 이벤트를 사용하여 애플리케이션이 사용자의 행동에 상호작용하고 반응하도록 만듭니다. 예를 들어, 사용자가 새로운 지출을 추가하려는 버튼을 클릭하는 것은 우리가 처리해야 할 이벤트입니다.
지출 관리 앱에서 이벤트 처리
이제 우리는 지출 관리 앱에 상호작용성을 더해 보겠습니다. 간단한 예제부터 시작하여 점차 복잡한 상호작용으로 나아갑니다.
1. "지출 추가" 버튼 추가
먼저, 사용자가 새로운 지출을 추가할 수 있는 버튼을 추가해 보겠습니다. AddExpenseButton이라는 새로운 컴포넌트를 만들겠습니다.
import React from 'react';
const AddExpenseButton = () => {
const handleClick = () => {
console.log('지출 추가 버튼 클릭!');
};
return (
<button onClick={handleClick}>지출 추가</button>
);
};
export default AddExpenseButton;이를 단계별로 설명하자면:
- React를 import합니다 (JSX를 사용하기 위해서 항상 필요합니다).
-
AddExpenseButton이라는 기능형 컴포넌트를 정의합니다. - 컴포넌트 내부에서
handleClick함수를 정의합니다. 현재는 콘솔에 메시지를 로그합니다. - return 문에서
onClick속성을 가진 버튼을 렌더링합니다. 이 속성을 통해 이벤트 처리기를 버튼에 연결합니다.
이제 버튼이 클릭될 때마다 '지출 추가 버튼 클릭!'이 콘솔에 로그됩니다. 앱이 말하는 것을 배우는 것과 같습니다 - 각 클릭이 앱이 배우는 단어입니다!
2. 지출 양식 생성
다음으로, 사용자가 지출 상세를 입력할 수 있는 양식을 생성해 보겠습니다. 이 컴포넌트를 ExpenseForm이라고 부릅니다.
import React, { useState } from 'react';
const ExpenseForm = () => {
const [title, setTitle] = useState('');
const [amount, setAmount] = useState('');
const [date, setDate] = useState('');
const handleTitleChange = (event) => {
setTitle(event.target.value);
};
const handleAmountChange = (event) => {
setAmount(event.target.value);
};
const handleDateChange = (event) => {
setDate(event.target.value);
};
const handleSubmit = (event) => {
event.preventDefault();
console.log('양식 제출:', { title, amount, date });
// 여기서는 일반적으로 부모 컴포넌트나 API로 데이터를 전송합니다
};
return (
<form onSubmit={handleSubmit}>
<input type="text" value={title} onChange={handleTitleChange} placeholder="지출 제목" />
<input type="number" value={amount} onChange={handleAmountChange} placeholder="금액" />
<input type="date" value={date} onChange={handleDateChange} />
<button type="submit">지출 추가</button>
</form>
);
};
export default ExpenseForm;이를 단계별로 설명하자면:
-
useState를 React에서 import하여 양식의 상태를 관리합니다. -
title,amount,date라는 상태 변수를useState훅을 사용하여 정의합니다. - 각 입력 필드에 대한 처리 함수를 정의합니다. 이 함수들은 사용자가 타이핑할 때 상태를 업데이트합니다.
-
handleSubmit함수를 정의하여 기본 폼 제출 동작을 방지하고 양식 데이터를 로그합니다. - JSX에서 양식을 생성하고, 각 입력 필드에
value속성(상태에 의해 제어됨)과onChange속성(각 필드의 처리 함수를 가리킴)을 추가합니다. - 양식에
onSubmit속성을 추가하여handleSubmit함수를 가리킵니다.
이 양식은 청취하는 것을 잘 배운 비서와 같습니다 - 당신이 말하는 모든 것을 주의 깊게 듣고 기억합니다!
3. 상태를 상위로 이동
이제 새로운 지출을 목록에 추가하려고 합니다. 상태를 부모 컴포넌트로 이동시켜야 합니다. ExpenseManager 컴포넌트를 생성해 보겠습니다:
import React, { useState } from 'react';
import ExpenseForm from './ExpenseForm';
import ExpenseList from './ExpenseList';
const ExpenseManager = () => {
const [expenses, setExpenses] = useState([]);
const addExpense = (expense) => {
setExpenses((prevExpenses) => [...prevExpenses, expense]);
};
return (
<div>
<ExpenseForm onAddExpense={addExpense} />
<ExpenseList expenses={expenses} />
</div>
);
};
export default ExpenseManager;그리고 ExpenseForm을 수정하여 onAddExpense 프로퍼티를 사용하도록 합니다:
import React, { useState } from 'react';
const ExpenseForm = ({ onAddExpense }) => {
// ... 이전 상태와 처리 함수 정의 ...
const handleSubmit = (event) => {
event.preventDefault();
onAddExpense({ title, amount, date });
setTitle('');
setAmount('');
setDate('');
};
// ... 컴포넌트 나머지 부분 ...
};
export default ExpenseForm;이제 양식이 제출될 때, 부모 컴포넌트로부터 전달받은 onAddExpense 함수를 호출하여 새로운 지출을 목록에 추가합니다. 가족이 함께 일하는 것과 같습니다 - 자식(ExpenseForm)이 부모(ExpenseManager)에게 새로운 지출을 알리고, 부모가 그것을 기억합니다!
4. 삭제 기능 추가
마지막으로, 지출을 삭제할 수 있는 기능을 추가해 보겠습니다. ExpenseList 컴포넌트를 수정합니다:
import React from 'react';
const ExpenseList = ({ expenses, onDeleteExpense }) => {
return (
<ul>
{expenses.map((expense, index) => (
<li key={index}>
{expense.title} - ${expense.amount} ({expense.date})
<button onClick={() => onDeleteExpense(index)}>삭제</button>
</li>
))}
</ul>
);
};
export default ExpenseList;그리고 ExpenseManager를 업데이트합니다:
import React, { useState } from 'react';
import ExpenseForm from './ExpenseForm';
import ExpenseList from './ExpenseList';
const ExpenseManager = () => {
const [expenses, setExpenses] = useState([]);
const addExpense = (expense) => {
setExpenses((prevExpenses) => [...prevExpenses, expense]);
};
const deleteExpense = (index) => {
setExpenses((prevExpenses) => prevExpenses.filter((_, i) => i !== index));
};
return (
<div>
<ExpenseForm onAddExpense={addExpense} />
<ExpenseList expenses={expenses} onDeleteExpense={deleteExpense} />
</div>
);
};
export default ExpenseManager;이제 우리는 추가하고 삭제할 수 있는 완전한 기능을 갖춘 지출 관리자를 가지게 되었습니다!
결론
축하합니다! 지출 관리 애플리케이션을 반응형으로 만들었습니다. 이벤트 처리, 상태 관리, 컴포넌트 간 데이터 전달을 배웠습니다. React를 배우는 것은 자전거 타는 것과 같습니다 - 처음에는 흔들릴 수 있지만, 연습을 하면 곧 속도를 내기 시작합니다!
여기서 사용한 이벤트 처리자를 요약한 표입니다:
| 이벤트 처리자 | 컴포넌트 | 목적 |
|---|---|---|
| handleClick | AddExpenseButton | 버튼 클릭 시 메시지 로그 |
| handleTitleChange | ExpenseForm | 입력 필드의 제목 상태 업데이트 |
| handleAmountChange | ExpenseForm | 입력 필드의 금액 상태 업데이트 |
| handleDateChange | ExpenseForm | 입력 필드의 날짜 상태 업데이트 |
| handleSubmit | ExpenseForm | 기본 폼 제출 동작 방지하고 양식 데이터 로그 |
| onAddExpense | ExpenseManager | 새로운 지출을 목록에 추가 |
| onDeleteExpense | ExpenseManager | 목록에서 지출을 삭제 |
계속 연습하고, 계속 코딩하고, 가장 중요한 것은 즐겁게 하세요! React는 여정이며, 여러분은 React 마스터가 될 길을 이미 걸어가고 있습니다. 다음 번에 만나기까지, 행복한 코딩을 기원합니다!
Credits: Image by storyset