useReducer는 React Hooks 중 하나로, React 컴포넌트에서 상태를 관리하기 위한 방법 중 하나입니다. useReducer 함수는 두 개의 인수를 받습니다. 첫 번째 인수는 reducer 함수이고, 두 번째 인수는 초기 상태입니다. useReducer는 상태를 업데이트할 때마다 reducer 함수를 호출하며, reducer 함수는 현재 상태와 업데이트에 필요한 정보를 받아 새로운 상태를 반환합니다.
import React, { useReducer } from 'react';
function reducer(state, action){
switch (action.type) {
case 'increment' :
return { value : state.value + 1};
case 'decrement' :
return { value: state.value - 1};
default:
return state;
}
}
const UseReducer = () => {
const [state, dispatch] = useReducer(reducer, { value: 0 });
return(
<div>
<p>현재 카운터 값 <b>{state.value}</b>입니다.</p>
<button onClick={ () => dispatch({ type: 'increment'})}> +1 </button>
<button onClick={ () => dispatch({ type: 'decrement'})}> -1 </button>
</div>
);
};
export default UseReducer;
위 코드에서 reducer 함수는 state와 action을 인자로 받아 새로운 상태를 반환합니다. Counter 컴포넌트에서 useReducer를 사용하여 state와 dispatch를 가져와서, dispatch 함수를 사용하여 reducer 함수에 액션을 보냅니다. dispatch 함수는 액션 객체를 인자로 받으며, 이 액션 객체는 type 프로퍼티를 필수적으로 가져야 합니다.
위 예시에서는 더하기 버튼과 빼기 버튼을 클릭할 때마다 dispatch 함수를 호출하여 state를 업데이트합니다. 이후 reducer 함수가 호출되어 현재 상태와 액션 정보를 이용하여 새로운 상태를 계산하고 반환합니다. 이 새로운 상태는 state에 반영되어, 컴포넌트가 업데이트됩니다.
useState VS useReducer중에 어떤 것을 사용?
useReducer는 React의 상태 관리를 위한 중요한 기능 중 하나이며, 복잡한 상태 관리를 위해 사용됩니다. useState와 useReducer 중 어떤 것을 사용해야 할지에 대한 선택은 상황에 따라 다르지만, useReducer는 다음과 같은 상황에서 활용할 수 있습니다.
-
복잡한 상태 관리:
useState는 단순한 상태 관리에 적합하지만, 상태가 복잡해지면useReducer를 사용하는 것이 더 효율적입니다.useReducer는 상태 관리에 필요한 로직을 하나의 함수로 모아서 코드의 가독성을 높이고, 유지 보수를 쉽게합니다. -
다양한 액션 타입 처리:
useReducer는switch문으로 여러 가지 액션 타입을 처리할 수 있습니다. 예를 들어, 게시글 목록을 불러오는 액션과 게시글을 추가하는 액션을 구분하여 처리할 수 있습니다. -
하위 컴포넌트로 상태 전달:
useReducer는 컴포넌트 트리에서 높은 수준의 상태를 하위 컴포넌트로 전달하는 데에도 유용합니다.useContext를 사용하여 상태 전달을 할 수도 있지만, 상태가 복잡해지면useReducer를 사용하는 것이 더 편리합니다. -
상태 업데이트 최적화:
useReducer를 사용하면 상태 업데이트가 발생할 때마다 새로운 객체를 생성하지 않고, 이전 상태와 업데이트 된 정보를 바탕으로 새로운 상태를 만듭니다. 이를 통해 불필요한 렌더링을 방지하고 성능을 최적화할 수 있습니다.
따라서 useReducer는 복잡한 상태 관리를 필요로 하는 React 애플리케이션에서 매우 유용하게 사용될 수 있습니다.
최신 댓글