[javascript] 리액트 훅에서 상태(State) 관리 방법
리액트 훅을 사용하면 함수형 컴포넌트에서 상태를 관리할 수 있습니다. 이를 통해 상태와 생명주기 메서드를 클래스 컴포넌트에 의존하지 않고 관리할 수 있습니다. 리액트 훅을 사용하여 상태를 관리하는 방법을 살펴보겠습니다.
useState 훅을 사용한 상태 관리
useState 훅은 가장 기본적인 상태 관리 훅으로, 함수형 컴포넌트에서 상태를 추가할 수 있습니다. 이를 사용하여 상태변수와 해당 상태를 갱신하는 함수를 얻을 수 있습니다. 아래는 useState 훅을 사용하여 상태를 추가하고 갱신하는 예제입니다.
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
위 예제에서 useState 훅을 사용하여 count 상태 변수와 setCount 갱신 함수를 얻을 수 있습니다. 갱신 함수를 사용하여 상태를 업데이트하고 화면을 다시 렌더링할 수 있습니다.
useReducer 훅을 사용한 상태 관리
useReducer 훅은 복잡한 상태 로직을 다룰 때 유용합니다. 이를 사용하여 상태와 상태를 업데이트하는 로직을 분리하여 관리할 수 있습니다. 다음은 useReducer 훅을 사용하여 상태를 관리하는 예제입니다.
import React, { useReducer } from 'react';
const initialState = { count: 0 };
function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
throw new Error();
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
<button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
</div>
);
}
위 예제에서 useReducer 훅을 사용하여 state와 dispatch 함수를 얻을 수 있습니다. dispatch 함수를 사용하여 액션을 디스패치하고 상태를 업데이트할 수 있습니다.
결론
리액트 훅을 사용하여 함수형 컴포넌트에서 상태를 간편하게 관리할 수 있습니다. useState 훅은 간단한 상태 관리에 적합하며, useReducer 훅은 복잡한 상태 로직을 다룰 때 유용합니다. 이러한 리액트 훅을 적절히 활용하여 효율적인 상태 관리를 할 수 있습니다.