🚀 React 상태 관리의 모든 것 (useState, useReducer)

 

이번 글에서는 React에서 상태를 관리하는 두 가지 주요 Hook, useState와 useReducer를 이해하기 쉽게 정리해 보겠습니다.

🎯 상태(State)란 무엇인가?

React에서 상태(State)는 컴포넌트가 관리하고 변경할 수 있는 데이터입니다. 상태가 바뀔 때마다 React는 컴포넌트를 자동으로 다시 렌더링하여 UI를 최신 상태로 유지합니다.

✅ useState 개념과 활용 방법

useState는 React에서 가장 기본적인 상태 관리 Hook입니다. 주로 간단한 상태 관리에 적합하며 사용법도 쉽습니다.

기본 사용법:

const [state, setState] = useState(initialValue);

• state: 현재 상태값입니다.
• setState: 상태를 업데이트하는 함수입니다.

🔍 useReducer 개념과 활용 방법

useReducer는 복잡한 상태 로직을 처리하거나 여러 개의 하위 값이 포함된 상태를 관리할 때 주로 사용합니다.

기본 사용법:

const [state, dispatch] = useReducer(reducer, initialArg, init);

• state: 현재 상태를 나타냅니다.
• dispatch: 상태를 변경할 때 사용하는 함수로 액션 객체를 전달받습니다.
• reducer: 액션을 받아 새로운 상태를 반환하는 함수입니다.

📌 언제 useState와 useReducer를 사용해야 할까요?

• useState: 간단한 상태 관리(예: 단일 값 관리)에 적합합니다.
• useReducer: 복잡한 상태 관리(예: 다중 상태 업데이트, 여러 가지 액션 처리)에 적합합니다.

🎈 마무리

이 글을 통해 React의 상태 관리 Hook인 useState와 useReducer의 기본적인 개념과 차이점을 이해하셨길 바랍니다. 지속적인 연습을 통해 보다 복잡한 애플리케이션에서도 능숙하게 상태를 관리할 수 있을 것입니다.