ReactJS - 상태 관리를 위한 React Hooks 사용
안녕하세요, 미래의 React 개발자 여러분! 오늘 우리는 React Hooks를 사용한 상태 관리의 세계에 흥미로운 여정을 떠납니다. 친절한 이웃의 컴퓨터 과학 교사로서, 이 모험을 안내해 드리게 되어 기쁩니다. 프로그래밍에 새로운 분이라면 걱정하지 마세요 - 우리는 단계별로 진행하며, 얼마 지나지 않아 프로처럼 상태를 관리할 수 있을 것입니다!
React에서 상태는 무엇인가요?
자, 구체적인 내용으로 들어가기 전에 React에서 "상태"가 무엇을 의미하는지 이해해 보겠습니다. 당신이 모래성을 짓고 있다고 상상해 보세요. 모래성의 현재 모양과 크기는 그것의 "상태"입니다. 모래를 더하거나 뺄 때, 모래성의 상태가 변합니다. 마찬가지로, React에서 상태는 컴포넌트의 현재 조건 - 즉, 데이터, 외관, 또는 특정 순간의 행동을 의미합니다.
React Hooks 소개
이제 React Hooks에 대해 이야기해 보겠습니다. Hooks는 마법의 도구로서 컴포넌트에게 초능력을 부여합니다. 그들은 기능형 컴포넌트가 상태와 기타 React 기능을 클래스를 작성하지 않고도 가질 수 있도록 합니다. 오늘 집중할 Hooks는 useState입니다.
상태가 있는 컴포넌트 만들기
simple한 상태가 있는 컴포넌트를 만들어 보겠습니다. 버튼을 클릭할 때 증가하는 카운터를 만들어 보겠습니다.
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>당신은 {count} 번 클릭했습니다</p>
<button onClick={() => setCount(count + 1)}>
클릭해 보세요
</button>
</div>
);
}이를 간단히 설명하자면:
- 우리는
useState를 React에서导入了. -
Counter함수 내에서useState(0)를 호출하여count상태 변수를 0으로 초기화하고, 그를 업데이트할setCount함수를 만듭니다. - 현재
count를 텍스트段落에서 표시합니다. - 버튼을 클릭할 때
setCount(count + 1)을 호출하여 카운트를 증가시킵니다.
버튼을 클릭할 때마다 React는 업데이트된 카운트로 컴포넌트를 다시 렌더링합니다. 마법 같죠?
지출 관리 앱에서 상태 소개
이제 우리는 발을 담그고 더 실践적인 예제로 이동해 보겠습니다 - 지출 관리 앱입니다. 사용자가 지출을 추가할 수 있는 컴포넌트를 만들어 보겠습니다.
import React, { useState } from 'react';
function ExpenseManager() {
const [expenses, setExpenses] = useState([]);
const [newExpense, setNewExpense] = useState('');
const [newAmount, setNewAmount] = useState('');
const addExpense = () => {
if (newExpense && newAmount) {
setExpenses([...expenses, { name: newExpense, amount: parseFloat(newAmount) }]);
setNewExpense('');
setNewAmount('');
}
};
return (
<div>
<h2>지출 관리자</h2>
<input
type="text"
value={newExpense}
onChange={(e) => setNewExpense(e.target.value)}
placeholder="지출 이름"
/>
<input
type="number"
value={newAmount}
onChange={(e) => setNewAmount(e.target.value)}
placeholder="금액"
/>
<button onClick={addExpense}>지출 추가</button>
<ul>
{expenses.map((expense, index) => (
<li key={index}>{expense.name}: ${expense.amount}</li>
))}
</ul>
</div>
);
}와우, 많은 내용이네요! 이를 간단히 설명하자면:
- 우리는 세 가지 상태 변수를 가지고 있습니다:
-
expenses: 모든 지출을 저장할 배열 -
newExpense: 새로운 지출 이름을 저장할 문자열 -
newAmount: 새로운 지출 금액을 저장할 문자열
-
addExpense함수:
-
newExpense와newAmount가 비어 있지 않은지 확인합니다 - 새로운 지출 오브젝트를
expenses배열에 추가합니다 - 입력 필드를 지웁니다
- JSX에서:
- 두 개의 입력 필드가 있습니다: 지출 이름과 금액
- 지출을 추가하는 버튼
- 모든 지출을 표시하는 목록
처음에 모래성의 예를 들었을 때 말했던 것처럼, 이제는 모래 더미에서 언제든지 새로운 성(지출)을 추가할 수 있는 샌드박스를 가지게 되었습니다. 각 성은 이름과 크기(금액)를 가지고 있으며, 아래에 나열된 모든 성을 볼 수 있습니다.
메서드 표
사용한 메서드의 편리한 표입니다:
| 메서드 | 설명 |
|---|---|
| useState | 상태 변수와 그를 업데이트할 함수를 생성합니다 |
| setExpenses | 지출 배열을 업데이트합니다 |
| setNewExpense | 새로운 지출 이름을 업데이트합니다 |
| setNewAmount | 새로운 지출 금액을 업데이트합니다 |
| map | 배열의 각 요소에 대해 함수를 호출하여 새로운 배열을 생성합니다 |
결론
축하합니다! React Hooks를 사용한 상태 관리의 세계로 첫 걸음을 뗐습니다. 우리는 상태가 있는 컴포넌트를 만들고, 상태를 업데이트하고, 심지어 작은 지출 관리 앱을 만들어 보았습니다.
React를 배우는 것은 모래성을 짓는 것과 같습니다 - 작은 것으로 시작하고, 실험하고, 필요하다면 부수고 다시 시작하지 두려워하지 마세요. 연습을 통해 얼마 지나지 않아 복잡하고 아름다운 애플리케이션을 만들 수 있을 것입니다.
계속 코딩하고, 배우고, 가장 중요한 것은 즐겁게 해 보세요! 다음 번에 다시 만날 때까지, 친절한 이웃의 컴퓨터 과학 교사가 인사합니다. 즐거운 React 개발을!
Credits: Image by storyset