JSX를 사용하여 React 애플리케이션을 개발하다 보면 컴포넌트의 상태 변화를 감지하고 효과적으로 처리하는 방법에 대해 고민하게 됩니다. 이 블로그 포스트에서는 TypeScript와 JSX를 사용하는 환경에서 컴포넌트의 상태 변화를 감지하는 방법을 살펴보겠습니다.
상태 변화 감지를 위한 useState Hook 사용
React 함수형 컴포넌트에서 상태 변화를 감지하기 위해 useState Hook을 사용할 수 있습니다. TypeScript를 사용한다면, useState Hook을 사용할 때 해당 상태의 타입을 명시적으로 지정하는 것이 좋습니다.
아래는 useState Hook을 사용하여 상태를 선언하고 상태 변화를 감지하는 간단한 예제입니다.
import React, { useState } from 'react';
const Counter: React.FC = () => {
const [count, setCount] = useState<number>(0);
const handleIncrement = () => {
setCount(count + 1);
};
return (
<div>
<p>{count}</p>
<button onClick={handleIncrement}>Increment</button>
</div>
);
};
export default Counter;
위 예제에서 useState<number>(0)을 통해 상태의 타입이 number임을 명시하고, setCount 함수를 사용하여 상태를 변경할 때 TypeScript가 자동으로 타입을 검사해서 오류를 방지할 수 있습니다.
useReducer Hook 사용
useState Hook은 간단한 상태 관리에 적합하지만, 상태 변화를 더 세밀하게 다루고 싶을 때는 useReducer Hook을 사용할 수 있습니다. useReducer를 사용하면 상태 관리 로직을 컴포넌트 외부로 분리하여 더 깔끔한 코드를 작성할 수 있습니다.
아래는 useReducer Hook을 사용하여 상태를 관리하는 예제입니다.
import React, { useReducer } from 'react';
type State = {
count: number;
};
type Action = { type: 'increment' } | { type: 'decrement' };
const initialState: State = { count: 0 };
function reducer(state: State, action: Action): State {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
throw new Error();
}
}
const Counter: React.FC = () => {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<div>
<p>{state.count}</p>
<button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
<button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
</div>
);
};
export default Counter;
useReducer를 사용하면 상태와 상태 관리 로직을 한 곳에 모아둘 수 있어 유지보수가 편리해지며, 복잡한 상태 관리에 유용합니다.
마무리
JSX에서 컴포넌트의 상태 변화를 감지하기 위해 useState Hook과 useReducer Hook을 활용하는 방법에 대해 알아보았습니다. 이러한 상태 감지 방법들을 적절히 활용하여 React 애플리케이션을 효율적으로 개발할 수 있습니다. TypeScript와 JSX를 사용하는 프로젝트에서는 타입을 명시하는 것이 중요하며, 각 상황에 맞게 적절한 상태 관리 방법을 선택하는 것이 좋습니다.
참고 자료: