[React] state, setState, useState 완벽 가이드
React에서 상태 관리는 매우 중요한 개념입니다. 컴포넌트의 동작과 화면에 렌더링되는 데이터를 제어할 수 있기 때문입니다. 이 포스팅에서는 React의 state, setState, 그리고 useState에 대해 자세하게 알아보겠습니다.
1. React의 state란?
state는 React 컴포넌트에서 동적인 데이터를 관리하기 위한 객체입니다. state를 사용하면 사용자 입력이나 다른 이벤트에 따라 컴포넌트의 상태를 변경하고, 이를 화면에 반영할 수 있습니다.
- 정적 데이터는 props로 관리
- 동적 데이터는 state로 관리
예시
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
render() {
return <h1>현재 카운트: {this.state.count}</h1>;
}
}위 코드에서 this.state는 컴포넌트의 상태를 나타내며, count라는 상태 값을 관리합니다.
2. setState로 state 업데이트하기
클래스형 컴포넌트에서는 setState() 메서드를 사용하여 상태를 업데이트합니다. 상태가 변경되면 컴포넌트는 자동으로 리렌더링됩니다.
setState의 특징
- 비동기적으로 작동
- 상태가 변경되면 UI가 다시 렌더링됨
예시
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
increment = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<div>
<h1>현재 카운트: {this.state.count}</h1>
<button onClick={this.increment}>증가</button>
</div>
);
}
}increment 함수는 setState()를 호출하여 count 상태를 증가시키고, 버튼을 클릭하면 상태가 업데이트되어 화면에 즉시 반영됩니다.
3. useState란?
함수형 컴포넌트에서 상태를 관리하려면 useState 훅을 사용해야 합니다. useState는 상태 값과 그 값을 갱신하는 함수를 배열로 반환합니다.
기본 문법
const [state, setState] = useState(initialState);- state: 현재 상태 값
- setState: 상태를 업데이트하는 함수
- initialState: 상태의 초기값
예시
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<h1>현재 카운트: {count}</h1>
<button onClick={() => setCount(count + 1)}>증가</button>
</div>
);
}위의 함수형 컴포넌트 Counter에서는 useState를 사용하여 count 상태를 관리하고, 버튼을 클릭할 때마다 상태가 갱신됩니다.
4. 클래스형 vs 함수형 컴포넌트의 상태 관리 차이
- 클래스형 컴포넌트: this.state와 this.setState()를 사용하여 상태를 관리.
- 함수형 컴포넌트: useState()를 사용하여 상태를 관리.
클래스형 컴포넌트에서는 상태와 메서드가 분리되어 있지만, 함수형 컴포넌트에서는useState를 통해 보다 간결한 상태 관리를 할 수 있습니다.
5. 상태 초기값 설정
useState를 사용하여 상태 초기값을 설정할 수 있습니다. 이 초기값은 숫자, 문자열, 배열, 객체 등 다양한 형식이 가능합니다.
예시
const [name, setName] = useState('John');
const [items, setItems] = useState([]);
const [user, setUser] = useState({ id: 1, username: 'john_doe' });각 상태는 useState의 초기값을 설정하여 관리할 수 있습니다. 예를 들어, 문자열 name은 'John'으로 초기화되고, 배열 items는 빈 배열로 시작됩니다.
6. 결론
React에서 상태 관리는 매우 중요한 개념입니다. 함수형 컴포넌트에서는 useState 훅을 사용하여 상태를 간결하고 쉽게 관리할 수 있고, 클래스형 컴포넌트에서는 this.state와 setState()로 상태를 처리합니다. 컴포넌트의 동작에 맞는 상태 관리를 잘 설계하는 것이 React 애플리케이션의 성능과 유지보수성을 높이는 데 중요한 역할을 합니다.
