ReactJS - useState 사용법: 초보자 가이드
안녕하세요, 미래의 React 개발자 여러분! useState 훅의 세계로 떠나는 흥미로운 여정에서 여러분의 안내자로서 기쁩니다. 프로그래밍을 가르쳐온 지 오래된 제는 상태 관리를 배우는 것은 자전거 타는 것과 같다고 말씀드릴 수 있습니다.처음에는 흔들릴 수 있지만, 한 번 익숙해지면 React 프로젝트에서 자유자재로 활동할 수 있을 것입니다!
useState는 무엇이고 왜 필요한가요?
자세한 내용에 들어가기 전에 우선 useState를 필요로 하는 이유에 대해 이야기해보겠습니다. 간단한 카운터 앱을 만들어보세요. 숫자를 표시하고, 증가하거나 감소시키는 버튼이 있는 앱입니다. 현재 카운트를 어떻게 추적할까요? 여기에 useState가 등장합니다!
useState는 우리의 기능성 컴포넌트에 상태를 추가할 수 있게 해주는 React 훅입니다. 컴포넌트에 메모리를 주어 렌더링 사이의 것을 기억할 수 있게 해줍니다.
useState의 기능
useState의 주요 기능을 나누어 설명해보겠습니다:
| 기능 | 설명 |
|---|---|
| 기능성 컴포넌트에 상태 추가 | useState는 기능성 컴포넌트에서 상태를 사용할 수 있게 해줍니다. 이전에는 클래스 컴포넌트에서만 가능했던 기능입니다. |
| 배열 반환 | useState는 현재 상태 값과 그를 업데이트하는 함수를 포함한 배열을 반환합니다. |
| 모든 유형의 값을 저장할 수 있음 | 상태는 숫자, 문자열, 불리언, 객체, 배열 또는 기타 모든 JavaScript 유형일 수 있습니다. |
| 렌더링 재시작을 유발 | 상태가 업데이트될 때 컴포넌트가 재렌더링되어 새로운 상태를 반영합니다. |
이제 useState의 능력을 알고 있으므로, 실제로 사용해보겠습니다!
상태 훅 적용하기
간단한 예제로 시작해보겠습니다 - 우리의 카운터 앱입니다. useState를 사용하여 어떻게 구현할 수 있는지 보겠습니다:
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에서 임포트합니다.
- 컴포넌트 내에서 useState(0)를 호출하여 초기值为 0인 count 상태 변수를 생성합니다.
- useState는 배열을 반환하므로, count(현재 상태)와 setCount(상태 업데이트 함수)로 구조화합니다.
- JSX 내에서 현재 count를 표시하고, 버튼을 클릭할 때 setCount를 호출하여 count를 증가시킵니다.
버튼이 클릭될 때마다 setCount가 호출되어 상태를 업데이트하고, 컴포넌트가 새로운 count 값으로 재렌더링됩니다.
여러 상태 변수
useState의 아름다운 점 중 하나는 단일 컴포넌트에서 여러 번 사용할 수 있다는 점입니다. 카운터에 이름을 추가하여 확장해보겠습니다:
function NamedCounter() {
const [count, setCount] = useState(0);
const [name, setName] = useState('');
return (
<div>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="이름을 입력하세요"
/>
<p>{name ? `${name}의 카운트` : '카운트'}: {count}</p>
<button onClick={() => setCount(count + 1)}>
증가
</button>
</div>
);
}여기서 우리는 useState를 두 번 사용하고 있습니다 - 하나는 count에 대해, 다른 하나는 이름 입력에 대해입니다. 각 상태 변수는 완전히 독립적으로 작동하여 여러 상태를 쉽게 관리할 수 있습니다.
객체를 상태로 사용하기
여러 개의 useState 호출이 독립적인 상태에 대해 잘 작동하지만, 관련된 상태를 그룹화하는 것이 더 편리한 경우가 있습니다. 그렇게 하는 방법을 보겠습니다:
function UserProfile() {
const [user, setUser] = useState({
name: '',
age: 0,
hobby: ''
});
const handleChange = (e) => {
const { name, value } = e.target;
setUser(prevUser => ({
...prevUser,
[name]: value
}));
};
return (
<div>
<input
name="name"
value={user.name}
onChange={handleChange}
placeholder="이름"
/>
<input
name="age"
type="number"
value={user.age}
onChange={handleChange}
placeholder="나이"
/>
<input
name="hobby"
value={user.hobby}
onChange={handleChange}
placeholder="취미"
/>
<p>
{user.name}은(는) {user.age} 살이고 {user.hobby}을(를) 좋아합니다.
</p>
</div>
);
}이 예제에서 우리는 단일 useState 호출을 사용하여 여러 속성을 포함한 객체를 관리하고 있습니다. handleChange 함수는 확장 연산자(...)를 사용하여 새로운 객체를 생성하고, 변경된 속성을 업데이트합니다.
이 접근 방식은 폼이나 관련된 상태가 여러 개인 경우 매우 유용할 수 있습니다.
경고사항
객체나 배열을 상태로 사용할 때는 항상 새로운 객체를 생성하여 상태를 업데이트해야 합니다. React는 참조 동등성을 사용하여 상태가 변경되었는지 판단하기 때문에, 객체의 속성을 직접 수정하는 것은 렌더링을 유발하지 않습니다.
결론
이렇게 해서 우리는 useState의 세계를 여행했습니다. 간단한 카운터에서 복잡한 객체 상태 관리까지. 기억해야 할 점은, 새로운 기술을 습득하는 것은 연습이 필요하다는 것입니다. 즉시 이해가 되지 않더라도 실천을 계속하면 곧 상태를 프로처럼 관리할 수 있을 것입니다!
이제 우리가 배운 것을 요약해보겠습니다:
- useState는 기능성 컴포넌트에 상태를 추가할 수 있게 해줍니다.
- 현재 상태와 그를 업데이트하는 함수를 포함한 배열을 반환합니다.
- 독립적인 상태에 대해 여러 번 사용할 수 있습니다.
- 관련된 데이터를 그룹화하기 위해 객체를 상태로 사용할 수 있습니다.
- 객체 상태를 업데이트할 때 항상 새로운 객체를 생성해야 합니다.
이제 놀라운 상태를 가진 React 애플리케이션을 만들어보세요! React의 세계에서 변화는 유일한 항상不变的입니다!
Credits: Image by storyset