ReactJS - 상태 관리

안녕하세요, 미래의 React 슈퍼스타 여러분! ? 오늘 우리는 React에서 가장 중요한 개념 중 하나인 상태 관리에 대해 배우겠습니다. 프로그래밍에 새로운 사람이라고 걱정하지 마세요; 이 여정을 단계별로 안내해 드리겠습니다. 그러니 좋아하는 음료를 한 잔 챙기고, 시작해 보세요!

상태란 무엇인가요?

당신이 카드 집을 만드는 것을 상상해 보세요. 각 카드는 앱의 정보를 나타냅니다. 이제 한 장의 위치를 바꿀 필요가 생긴다면 어떻게 될까요? 그렇죠, 전체 구조에 영향을 미칩니다! React에서 우리는 이러한 동적이고 변할 수 있는 정보를 "상태"라고 부릅니다.

상태는 React 컴포넌트의 기억과 같습니다. 시간이 지남에 따라 변할 수 있는 데이터를 저장하며, 이 데이터가 변할 때마다 React는 사용자 인터페이스를 효율적으로 업데이트하여 그 변화를 반영합니다.

간단한 예제를 보겠습니다:

import React, { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0);

return (
<div>
<p>당신은 {count} 번 클릭했습니다</p>
<button onClick={() => setCount(count + 1)}>
클릭하세요
</button>
</div>
);
}

이 예제에서 count은 우리의 상태입니다. 0에서 시작하여 버튼을 클릭할 때마다 증가합니다. 이 마법은 count이 변할 때마다 React가 자동으로 컴포넌트를 다시 렌더링하여 화면에 보이는 것을 업데이트하는 것입니다.

상태 정의하기

이제 상태가 무엇인지 이해했으므로, React 컴포넌트 내에서 어떻게 정의하는지 배워보겠습니다. 최신 React에서는 useState 훅을 사용하여 상태를 정의합니다. "훅"이 무서워 보일 수 있지만, 이것은 단지 우리의 컴포넌트에 React 기능을 추가할 수 있게 해주는 특별한 함수입니다.

기본 문법을 보겠습니다:

const [stateName, setStateName] = useState(initialValue);

이를 해부해 보겠습니다:

• stateName: 이는 상태 변수의 이름입니다.
• setStateName: 이는 상태를 업데이트할 수 있는 함수입니다.
• initialValue: 이는 상태의 초기 값입니다.

이를 실제로 적용해 보겠습니다:

import React, { useState } from 'react';

function UserProfile() {
const [name, setName] = useState('');
const [age, setAge] = useState(0);
const [isStudent, setIsStudent] = useState(false);

return (
<div>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="이름을 입력하세요"
/>
<input
type="number"
value={age}
onChange={(e) => setAge(parseInt(e.target.value))}
placeholder="나이를 입력하세요"
/>
<label>
<input
type="checkbox"
checked={isStudent}
onChange={(e) => setIsStudent(e.target.checked)}
/>
학생이신가요?
</label>
<p>이름: {name}</p>
<p>나이: {age}</p>
<p>학생: {isStudent ? '네' : '아니요'}</p>
</div>
);
}

이 예제에서 우리는 세 가지 상태 변수 name, age, isStudent을 정의했습니다. 각각의 변수는 다른 데이터 타입(문자열, 숫자, 부울)을 사용하여 상태의 다양성을 보여줍니다.

상태 객체 생성하기

occasionally, you might want to group related state variables together. In such cases, you can create a state object. This is particularly useful when you have many state variables or when they form a logical group.

Here's how you can do it:

import React, { useState } from 'react';

function BookForm() {
const [book, setBook] = useState({
title: '',
author: '',
year: 2023,
isPublished: false
});

const handleInputChange = (e) => {
const { name, value, type, checked } = e.target;
setBook(prevBook => ({
...prevBook,
[name]: type === 'checkbox' ? checked : value
}));
};

return (
<form>
<input
type="text"
name="title"
value={book.title}
onChange={handleInputChange}
placeholder="Book Title"
/>
<input
type="text"
name="author"
value={book.author}
onChange={handleInputChange}
placeholder="Author Name"
/>
<input
type="number"
name="year"
value={book.year}
onChange={handleInputChange}
placeholder="Publication Year"
/>
<label>
<input
type="checkbox"
name="isPublished"
checked={book.isPublished}
onChange={handleInputChange}
/>
Is Published?
</label>
<p>Book Details: {JSON.stringify(book)}</p>
</form>
);
}

In this example, we've created a state object book that contains all the information about a book. The handleInputChange function uses the spread operator (...) to create a new object with all the existing properties of book, and then updates the specific property that changed.

This approach is particularly useful when you're dealing with forms or any scenario where you have multiple related pieces of state.

상태 관리 방법

다음 표는 우리가 논의한 주요 상태 관리 방법을 요약합니다:

방법	설명	사용 사례
useState	기능 컴포넌트에 상태 추가하는 훅	간단한 상태 관리
상태 객체	관련된 상태 변수를 그룹화하는 객체	복잡한 폼, 관련 데이터
확장 연산자	새로운 객체를 만들어 업데이트된 속성을 추가	중첩된 상태 객체 업데이트
setState의 콜백 형식	setState(prevState => ...)	새로운 상태가 이전 상태에 의존할 때

상태 관리를 마스터하는 것은 React 닌자가 되는 데 필수적입니다! ?처음에는 어려워 보일 수 있지만, 연습을 통해 두고두고 익숙해질 것입니다. 계속 코딩하고, 실험하고, 가장 중요한 것은 즐기세요!

제가 가르치는 연간 동안, 제가 발견한 가장 좋은 학습 방법은 직접 만드는 것입니다. 따라서 이 예제들을 가져다가 조금씩 바꾸고, 깨뜨리고, 다시 만들어 보세요. 그래야 진정으로 React의 상태 관리의 힘을 이해할 수 있습니다.

행복하게 코딩하세요, 그리고 상태가 함께 하기를 바랍니다! ?

Credits: Image by storyset