useState는 함수 컴포넌트 내에서 상태를 관리하기 위한 Hook 중 하나입니다.
useState를 사용하면 함수 컴포넌트에서 상태를 추가할 수 있습니다.
이 Hook은 배열을 반환하며, 첫 번째 요소는 현재 상태 값이고, 두 번째 요소는 상태를 갱신하는 함수입니다.
import React, { useState } from 'react';
function Counter() {
// useState를 사용하여 count 상태와 그를 갱신하는 함수 setCount를 정의합니다.
const [count, setCount] = useState(0);
// 버튼을 클릭할 때 호출되는 증가 함수
const increment = () => {
setCount(count + 1);
}
// 버튼을 클릭할 때 호출되는 감소 함수
const decrement = () => {
setCount(count - 1);
}
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
</div>
);
}
export default Counter;위 코드에서는 useState Hook을 사용하여 count라는 상태와 이를 갱신하는 함수 setCount를 생성했습니다.
초기 값은 0으로 설정되어 있습니다.
그리고 두 개의 버튼을 만들어 각각 increment와 decrement 함수를 호출하도록 설정했습니다.
increment 함수는 setCount(count + 1)을 호출하여 count 값을 1씩 증가시키고, decrement 함수는 setCount(count - 1)을 호출하여 count 값을 1씩 감소시킵니다.
이제 이 Counter 컴포넌트를 다른 컴포넌트에서 사용하면, 화면에 카운터가 나타나고 버튼을 클릭할 때마다 숫자가 증가 또는 감소할 것입니다.
import React from 'react';
import Counter from './Counter';
function App() {
return (
<div className="App">
<Counter />
</div>
);
}
export default App;이제 App 컴포넌트에 Counter 컴포넌트를 렌더링하면, 카운터 애플리케이션이 동작할 것입니다.
useState 선언 유의사항:
일반적인 선언:
const [state, setState] = useState(initialValue);useState 내부에서 함수를 호출하지 않고, 초기값을 바로 넣는 경우입니다.
이 경우, 컴포넌트가 렌더링될 때마다 호출됩니다.
const [name, setName] = useState("John");
const [count, setCount] = useState(0);함수 호출로 값 설정:
const [state, setState] = useState(() => someFunction());함수를 호출하여 값을 설정해야 할 경우에는 위와 같이 사용합니다.
이렇게 사용하면 해당 함수는 컴포넌트가 처음 렌더링될 때 한 번만 호출됩니다.
const [name, setName] = useState(() => someHeavyFunction()); // 한번만 호출됨
const [count, setCount] = useState(() => getInitialCount());set 함수 사용 유의사항:
비동기 방식으로 값 변경:
set 함수는 비동기 방식으로 값을 변경합니다.
따라서 연속적으로 값을 변경하는 경우, 함수를 사용하여 이전 상태를 업데이트하는 것이 좋습니다.
const handleClick = () => {
setCount(prev => prev + 1); // 이전 상태(prev)를 기반으로 업데이트
setCount(prev => prev + 1); // 정상적으로 변경됨
setCount(prev => prev + 1); // 정상적으로 변경됨
}위의 코드에서 setCount를 연속적으로 호출해도 값이 변경되지 않습니다. 이는 set 함수가 비동기적으로 동작하기 때문입니다.
setCount((prev) => prev + 1)을 사용하면, 이전 상태를 기반으로 새로운 상태를 업데이트하게 됩니다.
이러한 유의사항들을 준수하면서 useState와 set 함수를 사용하면 React 컴포넌트를 효과적으로 관리할 수 있습니다.
